How to use Checkbox inside Select Option

Question

The client has given me a design which has a Select Option menu containing a checkbox together with the item name as individual items in the list  Is there anyway possible to add a checkbox inside a Select Option menu   NB  Developer needs to add his own id to make the menu effective  I only need the HTML CSS code if it is possible

User · Answer

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript. Here is a possible working solution. The explanation follows.

enter image description here

Code:

_x000D_

var expanded = false;_x000D_
_x000D_
function showCheckboxes() {_x000D_
  var checkboxes = document.getElementById("checkboxes");_x000D_
  if (!expanded) {_x000D_
    checkboxes.style.display = "block";_x000D_
    expanded = true;_x000D_
  } else {_x000D_
    checkboxes.style.display = "none";_x000D_
    expanded = false;_x000D_
  }_x000D_
}

_x000D_

.multiselect {_x000D_
  width: 200px;_x000D_
}_x000D_
_x000D_
.selectBox {_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.selectBox select {_x000D_
  width: 100%;_x000D_
  font-weight: bold;_x000D_
}_x000D_
_x000D_
.overSelect {_x000D_
  position: absolute;_x000D_
  left: 0;_x000D_
  right: 0;_x000D_
  top: 0;_x000D_
  bottom: 0;_x000D_
}_x000D_
_x000D_
#checkboxes {_x000D_
  display: none;_x000D_
  border: 1px #dadada solid;_x000D_
}_x000D_
_x000D_
#checkboxes label {_x000D_
  display: block;_x000D_
}_x000D_
_x000D_
#checkboxes label:hover {_x000D_
  background-color: #1e90ff;_x000D_
}

_x000D_

<form>_x000D_
  <div class="multiselect">_x000D_
    <div class="selectBox" onclick="showCheckboxes()">_x000D_
      <select>_x000D_
        <option>Select an option</option>_x000D_
      </select>_x000D_
      <div class="overSelect"></div>_x000D_
    </div>_x000D_
    <div id="checkboxes">_x000D_
      <label for="one">_x000D_
        <input type="checkbox" id="one" />First checkbox</label>_x000D_
      <label for="two">_x000D_
        <input type="checkbox" id="two" />Second checkbox</label>_x000D_
      <label for="three">_x000D_
        <input type="checkbox" id="three" />Third checkbox</label>_x000D_
    </div>_x000D_
  </div>_x000D_
</form>

_x000D_

Explanation:

At first we create a select element that shows text "Select an option", and empty element that covers (overlaps) the select element (<div class="overSelect">). We do not want the user to click on the select element - it would show an empty options. To overlap the element with other element we use CSS position property with value relative | absolute.

To add the functionality we specify a JavaScript function that is called when the user clicks on the div that contains our select element (<div class="selectBox" onclick="showCheckboxes()">).

We also create div that contains our checkboxes and style it using CSS. The above mentioned JavaScript function just changes <div id="checkboxes"> value of CSS display property from "none" to "block" and vice versa.

The solution was tested in the following browsers: Internet Explorer 10, Firefox 34, Chrome 39. The browser needs to have JavaScript enabled.

More information:

CSS positioning

How to overlay one div over another div

http://www.w3schools.com/css/css_positioning.asp

CSS display property

http://www.w3schools.com/cssref/pr_class_display.asp

User · Answer

Alternate Vanilla JS version with click outside to hide checkboxes   let expanded   false  const multiSelect   document querySelector   multiselect     multiSelect addEventListener  click   function e      const checkboxes   document getElementById  checkboxes        if   expanded        checkboxes style display    block       expanded   true      else       checkboxes style display    none       expanded   false        e stopPropagation       true   document addEventListener  click   function e     if  expanded        checkboxes style display    none       expanded   false         false    I m using addEventListener instead of onClick in order to take advantage of the capture bubbling phase options along with stopPropagation    You can read more about the capture bubbling here  https   developer mozilla org en-US docs Web API EventTarget addEventListener  The rest of the code matches vitfo s original answer  but no need for onclick   in the html   A couple of people have requested this functionality sans jQuery   Here s codepen example https   codepen io davidysoards pen QXYYYa editors 1010

User · Answer

You can try Bootstrap-select  It has a live search too

User · Answer

You might be loading multiselect js file before the option list updated with AJAX call so while execution of multiselect js file there is empty option list is there to apply multiselect functionlaity  So first update the option list by AJAX call then initiate the multiselect call you will get the dropdown list with the dynamic option list   Hope this will help you out   Multiselect dropdown list and related js  amp  css files   x000D   x000D     This function should be called while loading page x000D  var loadParentTaskList   function    x000D        ajax   x000D          url  yoururl  x000D          method   POST   x000D          success  function data   x000D                 To add options list coming from AJAX call multiselect x000D              for  var field in data    x000D                      lt option value       data field  name     gt     data field  name     lt  option gt    appendTo   parent task    x000D                x000D      x000D                 To initiate the multiselect call  x000D                  parent task   multiselect   x000D                  includeSelectAllOption  true x000D                 x000D            x000D          x000D    x000D     Multiselect drop down list with id parent task x000D   lt select id  parent task  multiple  multiple  gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

For a Pure CSS approach  you can use the  checked selector combined with the   before selector to inline conditional content   Just add the class select-checkbox to your select element and include the following CSS    select-checkbox option  before     content    2610     width  1 3em    text-align  center    display  inline-block     select-checkbox option checked  before     content    2611       You can use plain old unicode characters  with an escaped hex encoding  like these      Ballot Box -  2610   Ballot Box With Check -  2611   Or if you want to spice things up  you can use these FontAwesome glyphs     fa-square-o -  f096   fa-check-square-o -  f046     Demo in jsFiddle  amp  Stack Snippets   x000D   x000D  select   x000D    width  150px  x000D    x000D   x000D   select-checkbox option  before   x000D    content    2610   x000D    width  1 3em  x000D    text-align  center  x000D    display  inline-block  x000D    x000D   select-checkbox option checked  before   x000D    content    2611   x000D    x000D   x000D   select-checkbox-fa option  before   x000D    font-family  FontAwesome  x000D    content    f096   x000D    width  1 3em  x000D    display  inline-block  x000D    margin-left  2px  x000D    x000D   select-checkbox-fa option checked  before   x000D    content    f046   x000D    x000D   lt link rel  stylesheet  type  text css  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome css  gt  x000D   x000D   lt h3 gt Unicode lt  h3 gt  x000D   lt select multiple    class  form-control select-checkbox  size  5  gt  x000D     lt option gt Dog lt  option gt  x000D     lt option gt Cat lt  option gt  x000D     lt option gt Hippo lt  option gt  x000D     lt option gt Dinosaur lt  option gt  x000D     lt option gt Another Dog lt  option gt  x000D   lt  select gt  x000D   x000D   lt h3 gt Font Awesome lt  h3 gt  x000D   lt select multiple    class  form-control select-checkbox-fa  size  5  gt  x000D     lt option gt Dog lt  option gt  x000D     lt option gt Cat lt  option gt  x000D     lt option gt Hippo lt  option gt  x000D     lt option gt Dinosaur lt  option gt  x000D     lt option gt Another Dog lt  option gt  x000D   lt  select gt  x000D   x000D   x000D       Note  Beware of IE compatibility issues however

User · Answer

I started from  vitfo answer but I want to have  lt option gt  inside  lt select gt  instead of checkbox inputs so i put together all the answers to make this  there is my code  I hope it will help someone    x000D   x000D      multiple select   mousedown function e    x000D      if  e target tagName     OPTION    x000D        x000D        return    don t close dropdown if i select option x000D        x000D        this  toggleClass  multiple select active      close dropdown if click inside  lt select gt  box x000D      x000D      multiple select   on  blur   function e    x000D        this  removeClass  multiple select active      close dropdown if click outside  lt select gt  x000D      x000D    x000D      multiple select option   mousedown function e      no ctrl to select multiple x000D      e preventDefault     x000D        this  prop  selected     this  prop  selected     false   true     set selected options on click x000D        this  parent   change      trigger change event x000D      x000D   x000D    x000D       myFilter   on  change   function     x000D        var selected       myFilter   val   toString      here I get all options and convert to string x000D        var document style   document documentElement style  x000D        if selected         x000D          document style setProperty  --text     Selected    selected       x000D        else x000D          document style setProperty  --text     Select values     x000D       x000D   root x000D    x000D   --text   Select values   x000D    x000D   multiple select x000D    x000D   height  18px  x000D   width  90   x000D   overflow  hidden  x000D   -webkit-appearance  menulist  x000D   position  relative  x000D    x000D   multiple select  before x000D    x000D   content  var --text   x000D   display  block  x000D    margin-left  5px  x000D    margin-bottom  2px  x000D    x000D   multiple select active x000D    x000D   overflow  visible  important  x000D    x000D   multiple select option x000D    x000D   display  none  x000D      height  18px  x000D   background-color  white  x000D    x000D   multiple select active option x000D    x000D   display  block  x000D    x000D   x000D   multiple select option  before   x000D    content    2610   x000D    x000D   multiple select option checked  before   x000D    content    2611   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt select id  myFilter  class  multiple select  multiple gt  x000D     lt option gt A lt  option gt  x000D     lt option gt B lt  option gt  x000D     lt option gt C lt  option gt  x000D     lt option gt D lt  option gt  x000D     lt option gt E lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

The best plugin so far is Bootstrap Multiselect   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt    lt title gt jQuery Multi Select Dropdown with Checkboxes lt  title gt    lt link rel  stylesheet  href  css bootstrap-3 1 1 min css  type  text css    gt   lt link rel  stylesheet  href  css bootstrap-multiselect css  type  text css    gt    lt script type  text javascript  src  http   code jquery com jquery-1 8 2 js  gt  lt  script gt   lt script type  text javascript  src  js bootstrap-3 1 1 min js  gt  lt  script gt   lt script type  text javascript  src  js bootstrap-multiselect js  gt  lt  script gt    lt  head gt    lt body gt    lt form id  form1  gt    lt div style  padding 20px  gt    lt select id  chkveg  multiple  multiple  gt        lt option value  cheese  gt Cheese lt  option gt       lt option value  tomatoes  gt Tomatoes lt  option gt       lt option value  mozarella  gt Mozzarella lt  option gt       lt option value  mushrooms  gt Mushrooms lt  option gt       lt option value  pepperoni  gt Pepperoni lt  option gt       lt option value  onions  gt Onions lt  option gt    lt  select gt    lt br   gt  lt br   gt    lt input type  button  id  btnget  value  Get Selected Values    gt    lt script type  text javascript  gt     function              chkveg   multiselect            includeSelectAllOption  true                  btnget   click function             alert     chkveg   val                   lt  script gt    lt  div gt    lt  form gt    lt  body gt   lt  html gt    Here s the DEMO   x000D   x000D    function     x000D   x000D        chkveg   multiselect   x000D      includeSelectAllOption  true x000D        x000D   x000D        btnget   click function     x000D      alert     chkveg   val     x000D        x000D      x000D   multiselect-container gt li gt a gt label   x000D    padding  4px 20px 3px 20px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   davidstutz de bootstrap-multiselect dist js bootstrap-multiselect js  gt  lt  script gt  x000D   lt link href  https   davidstutz de bootstrap-multiselect docs css bootstrap-3 3 2 min css  rel  stylesheet   gt  x000D   lt link href  https   davidstutz de bootstrap-multiselect dist css bootstrap-multiselect css  rel  stylesheet   gt  x000D   lt script src  https   davidstutz de bootstrap-multiselect docs js bootstrap-3 3 2 min js  gt  lt  script gt  x000D   x000D   lt form id  form1  gt  x000D     lt div style  padding 20px  gt  x000D   x000D       lt select id  chkveg  multiple  multiple  gt  x000D         lt option value  cheese  gt Cheese lt  option gt  x000D         lt option value  tomatoes  gt Tomatoes lt  option gt  x000D         lt option value  mozarella  gt Mozzarella lt  option gt  x000D         lt option value  mushrooms  gt Mushrooms lt  option gt  x000D         lt option value  pepperoni  gt Pepperoni lt  option gt  x000D         lt option value  onions  gt Onions lt  option gt  x000D       lt  select gt  x000D       x000D       lt br   gt  lt br   gt  x000D   x000D       lt input type  button  id  btnget  value  Get Selected Values    gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Only add class create div and add class form-control  iam use JSP boostrap4  Ignore c foreach    lt div class  multi-select form-control  style  height 107 292px   gt           lt div class  checkbox  id  checkbox-expedientes  gt               lt c forEach var  item  items    postulantes   gt                   lt label class  form-check-label  gt                       lt input id  options  class  postulantes  type  checkbox  value  1  gt Option 1 lt  label gt               lt  c forEach gt           lt  div gt       lt  div gt

User · Answer

If you want to create multiple select dropdowns in the same page    multiselect     width  200px      selectBox     position  relative      selectBox select     width  100     font-weight  bold      overSelect     position  absolute    left  0    right  0    top  0    bottom  0      checkboxes     display  none    border  1px  dadada solid      checkboxes label     display  block      checkboxes label hover     background-color   1e90ff      Html     lt form gt   lt div class  multiselect  gt   lt div class  selectBox  onclick  showCheckboxes    gt   lt select gt   lt option gt Select an option lt  option gt   lt  select gt   lt div class  overSelect  gt  lt  div gt   lt  div gt   lt div id  checkboxes  gt   lt label for  one  gt   lt input type  checkbox  id  one    gt First checkbox lt  label gt   lt label for  two  gt   lt input type  checkbox  id  two    gt Second checkbox lt  label gt   lt label for  three  gt   lt input type  checkbox  id  three    gt Third checkbox lt  label gt   lt  div gt   lt  div gt   lt div class  multiselect  gt   lt div class  selectBox  onclick  showCheckboxes    gt   lt select gt   lt option gt Select an option lt  option gt   lt  select gt   lt div class  overSelect  gt  lt  div gt   lt  div gt   lt div id  checkboxes  gt   lt label for  one  gt   lt input type  checkbox  id  one    gt First checkbox lt  label gt   lt label for  two  gt   lt input type  checkbox  id  two    gt Second checkbox lt  label gt   lt label for  three  gt   lt input type  checkbox  id  three    gt Third checkbox lt  label gt   lt  div gt   lt  div gt    lt  form gt    Using Jquery    function showCheckboxes elethis            if   elethis  next   checkboxes   is   hidden                   elethis  next   checkboxes   show                    selectBox   not elethis  next   checkboxes   hide               else                elethis  next   checkboxes   hide                    selectBox   not elethis  next   checkboxes   hide

User · Answer

Try multiple-select  especially multiple-items  Looks to be much clean and managed solution  with tons of examples  You can also view the source   lt div gt     lt div class  quot form-group row quot  gt       lt label class  quot col-sm-2 quot  gt        Basic Select      lt  label gt        lt div class  quot col-sm-10 quot  gt         lt select multiple  quot multiple quot  gt           lt option value  quot 1 quot  gt 1 lt  option gt           lt option value  quot 2 quot  gt 2 lt  option gt         lt  select gt       lt  div gt     lt  div gt      lt div class  quot form-group row quot  gt       lt label class  quot col-sm-2 quot  gt        Group Select      lt  label gt        lt div class  quot col-sm-10 quot  gt         lt select multiple  quot multiple quot  gt           lt optgroup label  quot Group 1 quot  gt             lt option value  quot 1 quot  gt 1 lt  option gt             lt option value  quot 2 quot  gt 2 lt  option gt           lt  optgroup gt           lt optgroup label  quot Group 2 quot  gt             lt option value  quot 6 quot  gt 6 lt  option gt             lt option value  quot 7 quot  gt 7 lt  option gt           lt  optgroup gt           lt optgroup label  quot Group 3 quot  gt             lt option value  quot 11 quot  gt 11 lt  option gt             lt option value  quot 12 quot  gt 12 lt  option gt           lt  optgroup gt         lt  select gt       lt  div gt     lt  div gt   lt  div gt    lt script gt      function            select   multipleSelect         multiple  true        multipleWidth  60              lt  script gt

User · Answer

Use this code for checkbox list on option menu    x000D   x000D   dropdown-menu input   x000D     margin-right  10px  x000D       x000D   lt div class  btn-group  gt  x000D       lt a href     class  btn btn-primary  gt  lt i class  fa fa-cogs  gt  lt  i gt  lt  a gt  x000D       lt a href     class  btn btn-primary dropdown-toggle  data-toggle  dropdown  gt  x000D         lt span class  caret  gt  lt  span gt  x000D       lt  a gt  x000D       lt ul class  dropdown-menu  style  padding  10px  id  myDiv  gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id1   gt  OA Number lt  p gt  lt  li gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id2   gt Customer lt  p gt  lt  li gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id3   gt  OA Date lt  p gt  lt  li gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id4   gt Product Code lt  p gt  lt  li gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id5   gt Name lt  p gt  lt  li gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id6   gt WI Number lt  p gt  lt  li gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id7   gt WI QTY lt  p gt  lt  li gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id8   gt Production QTY lt  p gt  lt  li gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id9   gt PD Sr No  from-to  lt  p gt  lt  li gt  x000D           lt li gt  lt p gt  lt input type  checkbox  value  id10   gt  Production Date lt  p gt  lt  li gt  x000D           lt button class  btn btn-info  onClick  showTable     gt Go lt  button gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use this library on git for this purpose https   github com ehynds jquery-ui-multiselect-widget  for initiating the selectbox use this          selectBoxId   multiselect   multiselectfilter      and when you have the data ready in json  from ajax or any method   first parse the data  amp  then assign the js array to it      var js arr     parseJSON   data from ajax             selectBoxId   val js arr           selectBoxId   multiselect  refresh

[javascript] How to use Checkbox inside Select Option

Code:

Explanation:

More information:

Examples related to javascript

Examples related to html

Examples related to css

Examples related to html-select