Best IT Recipes

How to use the checkbox inside Select an option

The client provided me with a project in which there is a menu "Select Variant" containing a checkbox along with the name of the element as separate elements in the list. Can I add a checkbox inside the "Select Option" menu?

NB: the developer needs to add his own identifier to make the menu effective, I only need HTML CSS code, if possible.

+83
javascript html css html-select
Jul 18 '13 at 4:46 on
source share
11 answers

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

enter image description here



The code:

var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } } 
 .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; } 
 <form> <div class="multiselect"> <div class="selectBox" onclick="showCheckboxes()"> <select> <option>Select an option</option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="one"> <input type="checkbox" id="one" />First checkbox</label> <label for="two"> <input type="checkbox" id="two" />Second checkbox</label> <label for="three"> <input type="checkbox" id="three" />Third checkbox</label> </div> </div> </form>

Explanation:

First, we create a select element that displays the text "Select a option", and an 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 display empty options. To overlap an element with another element, we use the CSS position property with a value of relative | absolute.

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

We also create a div that contains our checkboxes and style it with CSS. The above JavaScript function simply changes the value of the <div id="checkboxes"> 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. JavaScript must be enabled in the browser.



Additional Information:

CSS positioning

How to overlay one div on another div

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

CSS display property

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

+164
Dec 18 '14 at 12:50
source share

The best plugin to date is Bootstrap Multiselect

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Multi Select Dropdown with Checkboxes</title> <link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" /> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script> </head> <body> <form id="form1"> <div style="padding:20px"> <select id="chkveg" multiple="multiple"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> <br /><br /> <input type="button" id="btnget" value="Get Selected Values" /> <script type="text/javascript"> $(function() { $('#chkveg').multiselect({ includeSelectAllOption: true }); $('#btnget').click(function(){ alert($('#chkveg').val()); }); }); </script> </div> </form> </body> </html>

Here is a demo

+51
Aug 20
source share

For the Pure CSS approach, you can use the :checked selected selector in combination with the ::before selector for inline conditional content.

Just add a select-checkbox class 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 escaped hexadecimal encoding ), for example:

Or, if you want to animate, you can use these FontAwesome glyphs

Screen shot

Demo in jsFiddle & Stack Snippets

 select { width: 150px; } .select-checkbox option::before { content: "\2610"; width: 1.3em; text-align: center; display: inline-block; } .select-checkbox option:checked::before { content: "\2611"; } .select-checkbox-fa option::before { font-family: FontAwesome; content: "\f096"; width: 1.3em; display: inline-block; margin-left: 2px; } .select-checkbox-fa option:checked::before { content: "\f046"; } 
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <h3>Unicode</h3> <select multiple="" class="form-control select-checkbox" size="5"> <option>Dog</option> <option>Cat</option> <option>Hippo</option> <option>Dinosaur</option> <option>Another Dog</option> </select> <h3>Font Awesome</h3> <select multiple="" class="form-control select-checkbox-fa" size="5"> <option>Dog</option> <option>Cat</option> <option>Hippo</option> <option>Dinosaur</option> <option>Another Dog</option> </select>

Note : Beware of IE compatibility issues, however

+15
Feb 13 '18 at 21:34
source share

Try multiple-select . It looks like a clean and manageable solution, with many examples.

+11
Apr 11 '15 at 1:55
source share

I started with @vitfo answer, but I want to have <option> inside <select> instead of checkbox inputs, so I collected all the answers to do this, here is my code, I hope it helps someone.

 $(".multiple_select").mousedown(function(e) { if (e.target.tagName == "OPTION") { return; //don't close dropdown if i select option } $(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box }); $(".multiple_select").on('blur', function(e) { $(this).removeClass('multiple_select_active'); //close dropdown if click outside <select> }); $('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple e.preventDefault(); $(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click $(this).parent().change(); //trigger change event }); $("#myFilter").on('change', function() { var selected = $("#myFilter").val().toString(); //here I get all options and convert to string var document_style = document.documentElement.style; if(selected !== "") document_style.setProperty('--text', "'Selected: "+selected+"'"); else document_style.setProperty('--text', "'Select values'"); }); 
 :root { --text: "Select values"; } .multiple_select { height: 18px; width: 90%; overflow: hidden; -webkit-appearance: menulist; position: relative; } .multiple_select::before { content: var(--text); display: block; margin-left: 5px; margin-bottom: 2px; } .multiple_select_active { overflow: visible !important; } .multiple_select option { display: none; height: 18px; background-color: white; } .multiple_select_active option { display: block; } .multiple_select option::before { content: "\2610"; } .multiple_select option:checked::before { content: "\2611"; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="myFilter" class="multiple_select" multiple> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> </select>
+4
Apr 08 '19 at 16:24
source share

Use this code to list checkboxes in the options menu.

 .dropdown-menu input { margin-right: 10px; } 
 <div class="btn-group"> <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a> <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </a> <ul class="dropdown-menu" style="padding: 10px" id="myDiv"> <li><p><input type="checkbox" value="id1" > OA Number</p></li> <li><p><input type="checkbox" value="id2" >Customer</p></li> <li><p><input type="checkbox" value="id3" > OA Date</p></li> <li><p><input type="checkbox" value="id4" >Product Code</p></li> <li><p><input type="checkbox" value="id5" >Name</p></li> <li><p><input type="checkbox" value="id6" >WI Number</p></li> <li><p><input type="checkbox" value="id7" >WI QTY</p></li> <li><p><input type="checkbox" value="id8" >Production QTY</p></li> <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li> <li><p><input type="checkbox" value="id10" > Production Date</p></li> <button class="btn btn-info" onClick="showTable();">Go</button> </ul> </div>
+1
Oct 31 '17 at 7:14
source share

You can use this library in git for this purpose https://github.com/ehynds/jquery-ui-multiselect-widget

to run selectbox use this

  $("#selectBoxId").multiselect().multiselectfilter();

and when you have data ready in json (from ajax or any other method), first parse the data and then assign a js array to them

  var js_arr = $.parseJSON(/*data from ajax*/); $("#selectBoxId").val(js_arr); $("#selectBoxId").multiselect("refresh");
+1
Apr 05 '18 at 5:15
source share

 var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } } 
 .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; } 
 <form> <div class="multiselect"> <div class="selectBox" onclick="showCheckboxes()"> <select> <option>Select an option</option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="one"> <input type="checkbox" id="one" />First checkbox</label> <label for="two"> <input type="checkbox" id="two" />Second checkbox</label> <label for="three"> <input type="checkbox" id="three" />Third checkbox</label> </div> </div> </form>
+1
Oct 10 '18 at 19:28
source share

Alternative version of Vanilla JS with a click on the outside to hide the 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 use addEventListener instead of onClick to take advantage of the capture / pop-up phase options along with stopPropagation (). You can read more about the capture / bubble here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

The rest of the code matches the original vitfo answer (but there is no need for onclick () in html). Several people have requested this feature without jQuery.

Here is a sample code for https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

+1
Jul 11 '19 at 12:21
source share

You may have downloaded the multiselect.js file before the list of options is updated with an AJAX call, so when executing the multiselect.js file, there is an empty list of options to apply the multiselect functionlaity. So, first update the list of options for calling AJAX, and then run the multiselect call, you will get a drop-down list with a dynamic list of parameters.

Hope this helps you.

Multiselect dropdown list and related js and css files

 // This function should be called while loading page var loadParentTaskList = function(){ $.ajax({ url: yoururl, method: 'POST', success: function(data){ // To add options list coming from AJAX call multiselect for (var field in data) { $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task'); } // To initiate the multiselect call $("#parent_task").multiselect({ includeSelectAllOption: true }) } }); } 
 // Multiselect drop down list with id parent_task <select id="parent_task" multiple="multiple"> </select>
0
Aug 18 '16 at 13:56 on
source share

Just add a class, create a div and add a form control class. I am using JSP, boostrap4. Ignore c: foreach.

 <div class="multi-select form-control" style="height:107.292px;"> <div class="checkbox" id="checkbox-expedientes"> <c:forEach var="item" items="${postulantes}"> <label class="form-check-label"> <input id="options" class="postulantes" type="checkbox" value="1">Option 1</label> </c:forEach> </div> </div>
-one
Sep 07 '19 at 18:21
source share


More articles:


All Articles