simple jQuery or javascript multiple dropdown checklist

Question

I have jquery UI 1.7 and jquery 1.3.2 version. I want to have a combobox with multiple check list in it as shown in picture. Can someone please provide me some simple solution using pure HTML and javscript or JQuery. For the below one, I do not know how to use it

But I do not want any complex code or imports of libraries, preferably in simple javascript or jQuery e.g. jQuery("abcd").multipselect. Please also tell me how and where to put the files etc

Thank you

Aiden

Possible duplicate of [How to use Checkbox inside Select Option](http://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option) — Mr.7, Aug 10 '16 at 07:03
http://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option — Aiden, Aug 10 '16 at 07:22

score 1 · Answer 1 · answered Aug 10 '16 at 10:29

i think this will meet what you want

<html>
<head></head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<style>


.dropdown dd,
.dropdown dt {
  margin: 0px;
  padding: 0px;
}

.dropdown ul {
  margin: -1px 0 0 0;
}

.dropdown dd {
  position: relative;
}

.dropdown a,
.dropdown a:visited {
  color: #fff;
  text-decoration: none;
  outline: none;
  font-size: 12px;
}

.dropdown dt a {
  background-color: #d3d3d3;
  display: block;
  padding: 8px 20px 5px 10px;
  min-height: 25px;
  line-height: 25px;
  overflow: hidden;
  border: 0;
  width: 272px;
}

.dropdown dt a span,
.multiSel span {
  cursor: pointer;
  display: inline-block;
  padding: 0 3px 2px 0;
}

.dropdown dd ul {
  background-color: #bdbdbd;
  border: 0;
  color: #fff;
  display: none;
  left: 0px;
  padding: 2px 15px 2px 5px;
  position: absolute;
  top: 2px;
  width: 280px;
  list-style: none;
  height: 100px;
  overflow: auto;
}

.dropdown span.value {
  display: none;
}

.dropdown dd ul li a {
  padding: 5px;
  display: block;
}

.dropdown dd ul li a:hover {
  background-color: #fff;
}



</style>
<body>
<dl class="dropdown"> 

    <dt>
    <a href="#">
      <span class="hide">Select</span>    
      <p class="multiSel"></p>  
    </a>
    </dt>

    <dd>
        <div class="mutliSelect">
            <ul>
                <li>
                    <input type="checkbox" value="All" />Select All</li>
                <li>
                    <input type="checkbox" value="January" />January</li>
                <li>
                    <input type="checkbox" value="February" />February</li>
                <li>
                    <input type="checkbox" value="March" />March</li>
                <li>
                    <input type="checkbox" value="April" />April</li>
                <li>
                    <input type="checkbox" value="May" />May</li>
                <li>
                    <input type="checkbox" value="June" />June</li>
                <li>
                    <input type="checkbox" value="July" />July</li>
                <li>
                    <input type="checkbox" value="August" />August</li>
                <li>
                    <input type="checkbox" value="September" />September</li>
                <li>
                    <input type="checkbox" value="October" />October</li>
                <li>
                    <input type="checkbox" value="November" />November</li> 
                <li>
                    <input type="checkbox" value="December" />December</li> 
            </ul>
        </div>
    </dd>

</dl>
<script>
$(".dropdown dt a").on('click', function() {
  $(".dropdown dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function() {
  $(".dropdown dd ul").hide();
});

function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});


function appendToMultiSelect(title){
    var itemLen = $('.multiSel span').length;
    if( itemLen > 0){
        var lastItem = $('.multiSel span').last();
        lastItem.append(",") ;
    }

    var html = '<span title="' + title + '">' + title + '</span>';
    $('.multiSel').append(html);
}

$('.mutliSelect input[type="checkbox"]').change(function(){
if($(this).val() != "All")
{
    var title = $(this).val() ;

  if ($(this).is(':checked')) {
    appendToMultiSelect(title);
    $(".hide").hide();
  } else {
    $(".mutliSelect").find('li input[value=All]').prop('checked', false);
    $('span[title="' + title + '"]').remove();
    var itemLen = $('.multiSel span').length;
    if( itemLen > 0){
        var lastItem = $('.multiSel span').last();
        lastItem.html(lastItem.html().replace(',','')) ;
    }
    else{
    $(".hide").show();
    }

    var ret = $(".hide");
    $('.dropdown dt a').append(ret);

  }
}
else
{
    //clear selected items
    $('.multiSel').html('');
    if ($(this).is(':checked')) {
        $(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
        var option = $(this);
        option.prop('checked', true);
        title = option.val() ;
        appendToMultiSelect(title);
        });
        $(".hide").hide();
    }
    else{
        $(".mutliSelect").find('li input[type="checkbox"]').not($("input[value=All]")).each(function(){
        var option = $(this);
        option.prop('checked', false);
        });
        $(".hide").show();
    }
}
});

</script>
</body>
</html>

simple jQuery or javascript multiple dropdown checklist

1 Answers1