How to create checkbox inside dropdown

Question

I want to create a multiple selection dropbox list  Actually I have to select more than one option using a dropdown menu  When I simply do this as shown bellow    lt select gt    lt option gt  lt input type  checkbox  gt  lt  option gt   lt  select gt    Then checkbox  is showing in front of dropdown field  But I want to create  it for each option not for as a whole so that I can select more than option  Is there any way to do this

User · Answer

x000D   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   lt form gt  x000D     lt div class  multiselect  gt  x000D       lt div class  selectBox  onclick  showCheckboxes    gt  x000D         lt select gt  x000D           lt option gt Select an option lt  option gt  x000D         lt  select gt  x000D         lt div class  overSelect  gt  lt  div gt  x000D       lt  div gt  x000D       lt div id  checkboxes  gt  x000D         lt label for  one  gt  x000D           lt input type  checkbox  id  one    gt First checkbox lt  label gt  x000D         lt label for  two  gt  x000D           lt input type  checkbox  id  two    gt Second checkbox lt  label gt  x000D         lt label for  three  gt  x000D           lt input type  checkbox  id  three    gt Third checkbox lt  label gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Here is a simple dropdown checklist   x000D   x000D  var checkList   document getElementById  list1    checkList getElementsByClassName  anchor   0  onclick   function evt      if  checkList classList contains  visible        checkList classList remove  visible      else     checkList classList add  visible      x000D   dropdown-check-list     display  inline-block      dropdown-check-list  anchor     position  relative    cursor  pointer    display  inline-block    padding  5px 50px 5px 10px    border  1px solid  ccc      dropdown-check-list  anchor after     position  absolute    content        border-left  2px solid black    border-top  2px solid black    padding  5px    right  10px    top  20     -moz-transform  rotate -135deg     -ms-transform  rotate -135deg     -o-transform  rotate -135deg     -webkit-transform  rotate -135deg     transform  rotate -135deg       dropdown-check-list  anchor active after     right  8px    top  21       dropdown-check-list ul items     padding  2px    display  none    margin  0    border  1px solid  ccc    border-top  none      dropdown-check-list ul items li     list-style  none      dropdown-check-list visible  anchor     color   0094ff      dropdown-check-list visible  items     display  block    x000D   lt div id  list1  class  dropdown-check-list  tabindex  100  gt     lt span class  anchor  gt Select Fruits lt  span gt     lt ul class  items  gt       lt li gt  lt input type  checkbox    gt Apple  lt  li gt       lt li gt  lt input type  checkbox    gt Orange lt  li gt       lt li gt  lt input type  checkbox    gt Grapes  lt  li gt       lt li gt  lt input type  checkbox    gt Berry  lt  li gt       lt li gt  lt input type  checkbox    gt Mango  lt  li gt       lt li gt  lt input type  checkbox    gt Banana  lt  li gt       lt li gt  lt input type  checkbox    gt Tomato lt  li gt     lt  ul gt   lt  div gt  x000D   x000D   x000D

User · Answer

You can always use  multiple  or  multiple    true   option with a select tag  but there is one jquery plugin which makes it more beautiful  It is called chosen and can be found here   This fiddle-example might help you to get started  Thank you

User · Answer

This can t be done in just HTML  with form elements into option elements     Or you can just use a standard select multiple field    lt select multiple gt     lt option value  a  gt a lt  option gt     lt option value  b  gt b lt  option gt     lt option value  c  gt c lt  option gt   lt  select gt

User · Answer

Simply use bootstrap-multiselect where you can populate dropdown with multiselect option and many more feaatures  For doc and tutorials you may visit below link https   www npmjs com package bootstrap-multiselect http   davidstutz de bootstrap-multiselect

User · Answer

Multiple drop downs with checkbox s and jQuery    lt div id  list3  class  dropdown-check-list  tabindex  100  gt   lt span class  anchor  gt Which development s  are you interested in  lt  span gt     lt ul class  items  gt         lt li gt  lt input id  answers 2529 the-lawns  name  answers 2529  answers     type  checkbox  value  The Lawns   gt  lt label for  answers 2529 the-lawns  gt The Lawns lt  label gt  lt  li gt         lt li gt  lt input id  answers 2529 the-residence  name  answers 2529  answers     type  checkbox  value  The Residence   gt  lt label for  answers 2529 the-residence  gt The Residence lt  label gt  lt  li gt     lt  ul gt   lt  div gt    lt style gt   dropdown-check-list  display  inline-block  width  100      dropdown-check-list focus  outline 0     dropdown-check-list  anchor   width  98   position  relative  cursor  pointer  display  inline-block  padding-top 5px  padding-left 5px  padding-bottom 5px  border 1px  ccc solid     dropdown-check-list  anchor after   position  absolute  content      border-left  2px solid black  border-top  2px solid black  padding  5px  right  10px  top  20   -moz-transform  rotate -135deg   -ms-transform  rotate -135deg   -o-transform  rotate -135deg   -webkit-transform  rotate -135deg   transform  rotate -135deg      dropdown-check-list  anchor active after   right  8px  top  21      dropdown-check-list ul items   padding  2px  display  none  margin  0  border  1px solid  ccc  border-top  none     dropdown-check-list ul items li   list-style  none     dropdown-check-list visible  anchor   color   0094ff     dropdown-check-list visible  items   display  block     lt  style gt    lt script gt  jQuery function               var checkList       dropdown-check-list            checkList on  click    span anchor   function event               var element     this  parent                 if   element hasClass  visible                                   element removeClass  visible                              else                               element addClass  visible                                       lt  script gt

User · Answer

Very simple code with Bootstrap and JQuery without any additionnal javascript code    HTML     lt div class  dropdown  gt     lt button class  btn btn-secondary dropdown-toggle  type  button  id  dropdownMenuButton  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt      Dropdown button    lt  button gt     lt form class  dropdown-menu  aria-labelledby  dropdownMenuButton  gt       lt label class  dropdown-item  gt  lt input type  checkbox  name    value  one  gt First checkbox lt  label gt       lt label class  dropdown-item  gt  lt input type  checkbox  name    value  two  gt Second checkbox lt  label gt       lt label class  dropdown-item  gt  lt input type  checkbox  name    value  three  gt Third checkbox lt  label gt     lt  form gt   lt  div gt    CSS     dropdown-menu label     display  block      https   codepen io funkycram pen joVYBv

[javascript] How to create checkbox inside dropdown?

Examples related to javascript

Examples related to html

Examples related to css