Post
Ask Question

HTML Select Option with Checkbox (Multi Select)

  1. <script>  
  2.     var expanded = false;  
  3.   
  4.     function showCheckboxes()  
  5.     {  
  6.         var checkboxes = document.getElementById("checkboxes");  
  7.         if (!expanded)  
  8.         {  
  9.             checkboxes.style.display = "block";  
  10.             expanded = true;  
  11.         }  
  12.         else  
  13.         {  
  14.             checkboxes.style.display = "none";  
  15.             expanded = false;  
  16.         }  
  17.     }  
  18.     $(document).ready(function()  
  19.     {  
  20.         $("#checkboxes input[type='checkbox']").click(function()  
  21.         {  
  22.             alert($(this).val());  
  23.             var title = $(this).closest('#checkboxes').find('input[type="checkbox"]').val(),  
  24.                 title = $(this).val() + ",";  
  25.             alert(title);  
  26.         });  
  27.     });  
  28. </script>  
  29. <style>  
  30.     .multiselect {  
  31.         width: 200px;  
  32.     }  
  33.       
  34.     .selectBox {  
  35.         position: relative;  
  36.     }  
  37.       
  38.     .selectBox select {  
  39.         width: 100%;  
  40.         font-weight: bold;  
  41.     }  
  42.       
  43.     .overSelect {  
  44.         position: absolute;  
  45.         left: 0;  
  46.         right: 0;  
  47.         top: 0;  
  48.         bottom: 0;  
  49.     }  
  50.      
  51.     #checkboxes {  
  52.         display: none;  
  53.         border: 1px #dadada solid;  
  54.     }  
  55.      
  56.     #checkboxes label {  
  57.         display: block;  
  58.     }  
  59.      
  60.     #checkboxes label:hover {  
  61.         background-color: #1e90ff;  
  62.     }  
  63. </style>  
  64. <form>  
  65.     <div class="multiselect">  
  66.         <div class="selectBox" onclick="showCheckboxes()">  
  67.             <select>  
  68. <option id="drp">Select</option>  
  69. </select>  
  70.             <div class="overSelect"></div>  
  71.         </div>  
  72.         <div id="checkboxes">  
  73.             <label for="one"><input type="checkbox" id="one"/>First checkbox</label>  
  74.             <label for="two"><input type="checkbox" id="two"/>Second checkbox </label>  
  75.             <label for="three"><input type="checkbox" id="three" />Third checkbox</label>  
  76.         </div>  
  77.     </div>  
  78. </form>