客户给了我一个设计，它有一个选择选项菜单，其中包含一个复选框以及项目名称作为列表中的单个项目。 是否有可能在选择选项菜单中添加一个复选框？
注意：开发者需要添加自己的 id 才能使菜单生效，如果可能的话我只需要 HTML CSS 代码。
【问题讨论】：
标签： javascript html css html-select
目前最好的插件是Bootstrap Multiselect
编辑：这是我很久以前写的。我不再推荐使用 jQuery。你应该学习一个反应式框架，比如 Vue.js、React 或 Angular，你有很多模块可供选择。我相信你会找到你需要的。例如，我通过 Google 快速搜索找到了 this one。
<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>
这是一个演示：
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#chkveg').val());
});
});.multiselect-container>li>a>label {
padding: 4px 20px 3px 20px;
}<link href="https://unpkg.com/bootstrap@3.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.2/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-multiselect@0.9.13/dist/js/bootstrap-multiselect.js"></script>
<link href="https://unpkg.com/bootstrap-multiselect@0.9.13/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<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" />
</div>
</form>【讨论】：
您不能在选择元素内放置复选框，但您可以使用 HTML、CSS 和 JavaScript 获得相同的功能。这是一个可能的工作解决方案。解释如下。
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>首先，我们创建一个显示文本“选择一个选项”的选择元素，以及覆盖（重叠）选择元素的空元素 (<div class="overSelect">)。我们不希望用户点击选择元素——它会显示一个空选项。为了将元素与其他元素重叠，我们使用 CSS 位置属性，其值为 relative |绝对的。
为了添加功能，我们指定了一个 JavaScript 函数，当用户单击包含我们的选择元素 (<div class="selectBox" onclick="showCheckboxes()">) 的 div 时调用该函数。
我们还创建了包含复选框的 div 并使用 CSS 设置样式。上面提到的 JavaScript 函数只是将 CSS display 属性的 <div id="checkboxes"> 值从“none”更改为“block”，反之亦然。
该解决方案在以下浏览器中进行了测试：Internet Explorer 10、Firefox 34、Chrome 39。浏览器需要启用 JavaScript。
CSS 定位
How to overlay one div over another div
http://www.w3schools.com/css/css_positioning.asp
CSS 显示属性
【讨论】：
<option selected hidden>Select an option</option>，而不是overselect div，这可能会导致复杂界面中的一些问题。这可能不是hidden 的最佳用法，但它确实有效。
试试multiple-select，尤其是multiple-items。看起来很干净和管理的解决方案，有大量的例子。也可以查看源码。
<div>
<div class="form-group row">
<label class="col-sm-2">
Basic Select
</label>
<div class="col-sm-10">
<select multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">
Group Select
</label>
<div class="col-sm-10">
<select multiple="multiple">
<optgroup label="Group 1">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup label="Group 2">
<option value="6">6</option>
<option value="7">7</option>
</optgroup>
<optgroup label="Group 3">
<option value="11">11</option>
<option value="12">12</option>
</optgroup>
</select>
</div>
</div>
</div>
<script>
$(function() {
$('select').multipleSelect({
multiple: true,
multipleWidth: 60
})
})
</script>
【讨论】：
您可能在使用 AJAX 调用更新选项列表之前加载 multiselect.js 文件，因此在执行 multiselect.js 文件时，有一个空选项列表可以应用多选功能。因此，首先通过 AJAX 调用更新选项列表，然后启动多选调用，您将获得带有动态选项列表的下拉列表。
希望对你有所帮助。
Multiselect dropdown list 和 related js & 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>【讨论】：
将此代码用于选项菜单上的复选框列表。
.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>【讨论】：
dropdown-menu 的基本方法的完整示例，每行包含复选框元素，这是putting checkboxes in a Bootstrap dropdown 的答案
对于纯 CSS 方法，您可以使用 :checked 选择器和 ::before 选择器来内联条件内容。
只需将 select-checkbox 类添加到您的 select 元素并包含以下 CSS：
.select-checkbox option::before {
content: "\2610";
width: 1.3em;
text-align: center;
display: inline-block;
}
.select-checkbox option:checked::before {
content: "\2611";
}
您可以使用普通的旧 unicode 字符（带有 escaped hex encoding），如下所示：
\2610
\2611
或者，如果您想增加趣味，可以使用这些 FontAwesome 字形
\f096
\f046
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>【讨论】：
multiple 属性使<select> 看起来像一个框而不是下拉列表时，这是一个问题...
<select multiple> 元素，因此这应该是预期的用例。 CSS 选择器应该特定于应用该类，因此您决定通过应用 .select-checkbox 类来对单个元素使用
你可以在 git 上使用这个库来达到这个目的 https://github.com/ehynds/jquery-ui-multiselect-widget
用于启动选择框使用此
$("#selectBoxId").multiselect().multiselectfilter();
当您在 json 中准备好数据（来自 ajax 或任何方法）时，首先解析数据然后将 js 数组分配给它
var js_arr = $.parseJSON(/*data from ajax*/);
$("#selectBoxId").val(js_arr);
$("#selectBoxId").multiselect("refresh");
【讨论】：
我从@vitfo 答案开始，但我想在<select> 中添加<option> 而不是复选框输入，所以我将所有答案放在一起来完成这个，这是我的代码，我希望它会对某人有所帮助。
$(".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>【讨论】：
在外部单击以隐藏复选框的替代 Vanilla JS 版本：
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)
我正在使用 addEventListener 而不是 onClick，以便利用捕获/冒泡阶段选项以及 stopPropagation()。 您可以在此处阅读有关捕获/冒泡的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
其余代码与 vitfo 的原始答案相匹配（但 html 中不需要 onclick()）。 有几个人要求这个功能没有 jQuery。
这是代码笔示例https://codepen.io/davidysoards/pen/QXYYYa?editors=1010
【讨论】：
只添加class create div 和添加class form-control。我使用 JSP，boostrap4。忽略 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>
【讨论】：
如果您想在同一页面中创建多个选择下拉菜单：
.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：
<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>
<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>
使用 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();
}
}
【讨论】：
你可以试试Bootstrap-select。它也有实时搜索功能！
【讨论】：