如何使用select选项内的checkbox
客户给了我一个devise，它有一个select菜单，包含一个checkbox和项目名称作为列表中的单个项目。 无论如何可以在select选项菜单中添加一个checkbox。 注意：开发者需要添加自己的ID来使菜单有效，如果可能的话，我只需要HTML CSS代码。
你的任务可能已经很晚了，但其他人可能会发现我的答案很有用。 您不能将checkbox放在select元素中，但是您可以使用HTML，CSS和JavaScript获得相同的function。 这是一个可能的工作解决scheme。 解释如下。
码：
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>
到目前为止，最好的插件是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>
这是DEMO
尝试多选 。 看起来很干净，pipe理的解决scheme，有大量的例子。
您可能会在使用AJAX调用更新选项列表之前加载multiselect.js文件，以便在执行multiselect.js文件时有空选项列表，以应用多选function性。 因此，首先通过AJAX调用更新选项列表，然后启动多选呼叫，您将获得dynamic选项列表的下拉列表。
希望这会帮助你。
多选下拉列表和相关的js＆css文件
// 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>
在选项菜单上使用此代码checkbox列表。
<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" style="margin-right: 10px;" name="class"> OA Number</p></li> <li><p><input type="checkbox" value="id2" style="margin-right: 10px;" name="class">Customer</p></li> <li><p><input type="checkbox" value="id3" style="margin-right: 10px;"name="class"> OA Date</p></li> <li><p><input type="checkbox" value="id4" style="margin-right: 10px;" name="class">Product Code</p></li> <li><p><input type="checkbox" value="id5" style="margin-right: 10px;" name="class">Name</p></li> <li><p><input type="checkbox" value="id6" style="margin-right: 10px;" name="class">WI Number</p></li> <li><p><input type="checkbox" value="id7" style="margin-right: 10px;" name="class">WI QTY</p></li> <li><p><input type="checkbox" value="id8" style="margin-right: 10px;" name="class">Production QTY</p></li> <li><p><input type="checkbox" value="id9" style="margin-right: 10px;" name="class">PD Sr.No (from-to)</p></li> <li><p><input type="checkbox" value="id10" style="margin-right: 10px;" name="class"> Production Date</p></li> <button class="btn btn-info" onClick="showTable();">Go</button> </ul> </div>
