Post
Ask Question

Multiple Selection DropDownList

Introduction and purpose

In HTML, there is no control for multi select dropdown, we need to write our own logic. Here, I am going to exlpain with a small example. To accomplish our task, we used jQuery and CSS, using HTML.

HTML code

Here, we created a div tag in which we used simple input text field. On clicking text box, we are binding another div (in our example id='divmulti'), using jQuery.
  1. <div> <input type="text" id="txtmulti" onclick="multishow()" />  
  2.     <div id="divmulti" class="multiselect" style='width: 172px; overflow-y: scroll;height: 90px; display:none'> <label><input type="checkbox" value="Green"/>Green</label> <label><input type="checkbox" value="Red"/>Red</label> <label><input type="checkbox" value="Blue"/>Blue</label> <label><input type="checkbox" value="Orange"/>Orange</label> <label><input type="checkbox" value="Purple" />Purple</label> <label><input type="checkbox" value="Black" />Black</label> <label><input type="checkbox" value="White"/>White</label> </div>  
  3. </div>  
If you want to add dynamic data to display, loop the data and dynamically add the label element.

CSS code 
  1. <style type="text/css">  
  2.     .multiselect {  
  3.         width: 20em;  
  4.         height: 15em;  
  5.         border: solid 1px #c0c0c0;  
  6.         overflow: auto;  
  7.     }  
  8.   
  9.     .multiselect label {  
  10.         display: block;  
  11.     }  
  12.   
  13.     .multiselect-on {  
  14.         color: #ffffff;  
  15.         background-color: #000099;  
  16.     }  
  17. </style>  
jQuery code 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>. This tag is mandatory for us to show the checkboxes and maintains the state of it.
  1. <script type="text/javascript">  
  2.     jQuery.fn.multiselect = function() {  
  3.         $(this).each(function() {  
  4.             var checkboxes = $(this).find("input:checkbox");  
  5.             checkboxes.each(function() {  
  6.                 var checkbox = $(this);  
  7.                 // Highlight pre-selected checkboxes  
  8.                 if (checkbox.prop("checked")) {  
  9.                     checkbox.parent().addClass("multiselect-on");  
  10.                 }  
  11.                 // Highlight checkboxes that the user selects  
  12.                 checkbox.click(function() {  
  13.                     var checkbox = $(this);  
  14.                     if (checkbox.prop("checked")) {  
  15.                         checkbox.parent().addClass("multiselect-on");  
  16.                         var category = $('#txtmulti').val();  
  17.                         if ($.trim(category) != "") {  
  18.                             $('#txtmulti').val(category + "," + $(this).val());  
  19.                             $(this).val();  
  20.                         } else {  
  21.                             $('#txtmulti').val($(this).val());  
  22.                         }  
  23.                     } else {  
  24.                         checkbox.parent().removeClass("multiselect-on");  
  25.                         var category = $('#txtmulti').val();  
  26.                         category = category.replace($(this).val(), "").replace(',,', ',');  
  27.                         $('#txtmulti').val(category);  
  28.                     }  
  29.                 });  
  30.             });  
  31.         });  
  32.     };  
  33.     $(function() {  
  34.         $(".multiselect").multiselect();  
  35.     });  
  36.   
  37.     function multishow() {  
  38.         $('#divmulti').show();  
  39.     }  
  40.   
  41.     function removemultishow() {  
  42.         $('#divmulti').hide();  
  43.     }  
  44. </script>  
Conclusion

Furthur, we can add more CSS to improve UI but the logic remains the same.