如何在选择选项中使用复选框

您不能将复选框放置在 select 元素中，但是您可以通过使用 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>

说明:

首先，我们创建一个 Select 元素，其中显示文本“ Select an option”，以及覆盖(重叠) Select 元素(<div class="overSelect">)的空元素。我们不希望用户点击 select 元素-它将显示一个空选项。为了使元素与其他元素重叠，我们使用 CSS 位置属性和值相对 | 绝对值。

为了添加功能，我们指定一个 JavaScript 函数，当用户单击包含我们的 select 元素(<div class="selectBox" onclick="showCheckboxes()">)的 div 时调用该函数。

我们还创建了包含复选框的 div，并使用 CSS 设置它的样式。上面提到的 JavaScript 函数只是将 CSS 显示属性的 <div id="checkboxes">值从“无”改为“块”，反之亦然。

该解决方案在以下浏览器中进行了测试: Internet Explorer 10、火狐34、 Chrome 39。浏览器需要启用 JavaScript。

更多信息:

CSS 定位

如何将一个 div 叠加到另一个 div 上

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

CSS 显示属性

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

试试 多重选择，特别是 多重物品。看起来是非常干净和管理的解决方案，与吨的例子。您还可以查看源代码。

<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 文件执行时，有一个空选项列表用于应用 multiselect 功能。因此，首先通过 AJAX 调用更新选项列表，然后启动多重选择调用，您将获得带有动态选项列表的下拉列表。

希望这个能帮到你。

Multiselect 下拉列表 和 < a href = “ http://cdn.rawgit.com/davidstutz/bootstrap-Multiselect/master/dist/css/bootstrap-Multiselect.css”rel = “ nofollow norefrer”> 相关的 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>

选项菜单上的复选框列表使用此代码。

.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>

对于 纯 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 字符(带有 转义十六进制编码) :

• Something 投票箱-\2610
• Something 有支票的投票箱-\2611

或者，如果你想增加情趣，你可以使用这些 FontAwesome字形

• . fa-square-o-\f096
• . fa-check-square-o-\f046

JsFiddle演示及堆栈片段

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>

注意 : < a href = “ https://stackoverflow. com/q/48765664/1366033”> 然而要小心 IE 兼容性问题

您可以为此目的在 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 答案，但我想有 <option>内部的 <select>，而不是复选框输入，所以我把所有的答案放在一起，使这一点，有我的代码，我希望它会有人帮助。

$(".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>

选择香草 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，以便利用捕获/冒泡阶段选项以及停止传播()。 你可以在这里了解更多关于捕获/冒泡的信息: < a href = “ https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener”rel = “ norefrer”> https://developer.mozilla.org/en-us/docs/web/api/eventtarget/addeventlistener

代码的其余部分与 vitfo 的原始答案相匹配(但不需要在 html 中使用 onclick ())。 有几个人要求使用 jQuery 来实现这个功能。

下面是代码实例 https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

只添加类 create div 和添加类 form-control. iam use 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;
}

网址:

 <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();
}
}

你可以试试 启动-选择。它也有一个现场搜索！