如何在Select Option中使用Checkbox
Her*_*Tra 87 html javascript css html-select
客户端给了我一个设计,其中有一个Select Option菜单,其中包含一个复选框以及项目名称作为列表中的单个项目.有没有可能在Select Option菜单中添加一个复选框？
注意:开发人员需要添加自己的ID才能使菜单生效,如果可能,我只需要HTML CSS代码.
vit*_*tfo 168
您不能在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>说明:
首先,我们创建一个显示文本"选择一个选项"的选择元素,以及覆盖(重叠)选择元素(<div class="overSelect">)的空元素.我们不希望用户单击select元素 - 它会显示一个空选项.要将元素与其他元素重叠,我们使用CSS position属性,其值为relative 绝对.
要添加功能,我们指定一个JavaScript函数,当用户单击包含select元素(<div class="selectBox" onclick="showCheckboxes()">)的div时调用该函数.
我们还创建包含复选框的div,并使用CSS设置样式.上面提到的JavaScript函数只是将<div id="checkboxes">CSS显示属性的值从"none"改为"block",反之亦然.
该解决方案在以下浏览器中进行了测试:Internet Explorer 10,Firefox 34,Chrome 39.浏览器需要启用JavaScript.
更多信息:
CSS定位
http://www.w3schools.com/css/css_positioning.asp
CSS显示属性
http://www.w3schools.com/cssref/pr_class_display.asp
- 当用户选择任何选项时,选择框也不会消失 (7认同)
- 仅供参考：如果需要修改多个选择列表，则此解决方案将需要更多努力。我建议使用一些积极维护的插件。 (2认同)
- 但是当我们在外面单击时如何隐藏下拉菜单？ (2认同)
pmr*_*ule 53
到目前为止,最好的插件是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
- 我喜欢这个插件的行为,但是想要在没有bootstrap的情况下使用它...类似的东西？ (4认同)
- 您的解决方案不需要使用这么多库。您可以只使用常规 HTML 多重选择选项。谢谢！ (3认同)
- 我知道我可以使用HTML多选选项,但我发现它很难看而且不方便用户. (3认同)
- 这个插件有很多问题...他们有 150 个未解决的问题，维护者说他没有时间。所以在出现一些问题后我切换到接受的答案和 vue (2认同)
- @Erbureth 演示中的外部脚本/样式表路径已过时（死链接）。我更新了网址以修复它。 (2认同)
Kyl*_*Mit 16
对于纯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字符(使用转义的十六进制编码),如下所示:
或者,如果你想要增加趣味,你可以使用这些FontAwesome字形
.fa-square-o -\f096
.fa-check-square-o -\f046
在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>注意:请注意IE兼容性问题
- 当“multiple”属性使“<select>”看起来像一个盒子而不是下拉列表时，这是一个问题...... (3认同)
- 如果您正在寻找纯 CSS 方法，强烈推荐这个优雅的解决方案。 (2认同)
- @KyleMit 不错的解决方案！！！但问题是，如果我想选择多个项目，那么我必须像使用简单的选择元素一样使用 Ctrl 按钮。 (2认同)
替代 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。
这是 codepen 示例https://codepen.io/davidysoards/pen/QXYYYa?editors=1010
我从@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>| 归档时间： |
|
| 查看次数： |
431013 次 |
| 最近记录： |