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. }
  9. .multiselect label {
  10. display: block;
  11. }
  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. });
  37. function multishow() {
  38. $('#divmulti').show();
  39. }
  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.