如何在下拉菜单中创建复选框？ [英] How to create checkbox inside dropdown?
本文介绍了如何在下拉菜单中创建复选框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要创建多选择收存箱列表。实际上，我必须使用下拉菜单选择多个选项。当我只是这样做如下所示：
I want to create a multiple selection dropbox list. Actually I have to select more than one option using a dropdown menu. When I simply do this as shown bellow:
<select>
<option><input type="checkbox"></option>
</select>
然后复选框显示在下拉字段前面。但我想为每个选项创建它不是一个整体，所以我可以选择更多的选项。有没有办法做到这一点？
Then checkbox is showing in front of dropdown field. But I want to create it for each option not for as a whole so that I can select more than option. Is there any way to do this?
推荐答案
这是一个简单的下拉清单
Here is a simple dropdown checklist
css
.dropdown-check-list {
display: inline-block;
}
.dropdown-check-list .anchor {
position: relative;
cursor: pointer;
display: inline-block;
padding: 5px 50px 5px 10px;
border: 1px solid #ccc;
}
.dropdown-check-list .anchor:after {
position: absolute;
content: "";
border-left: 2px solid black;
border-top: 2px solid black;
padding: 5px;
right: 10px;
top: 20%;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.dropdown-check-list .anchor:active:after {
right: 8px;
top: 21%;
}
.dropdown-check-list ul.items {
padding: 2px;
display: none;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
.dropdown-check-list ul.items li {
list-style: none;
}
.dropdown-check-list.visible .anchor {
color: #0094ff;
}
.dropdown-check-list.visible .items {
display: block;
}
//标记和脚本
<body>
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor">Select Fruits</span>
<ul class="items">
<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana </li>
<li><input type="checkbox" />Tomato</li>
</ul>
</div>
<script type="text/javascript">
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (checkList.classList.contains('visible'))
checkList.classList.remove('visible');
else
checkList.classList.add('visible');
}
checkList.onblur = function(evt) {
checkList.classList.remove('visible');
}
</script>
</body>
这篇关于如何在下拉菜单中创建复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
