如何在下拉菜单中创建复选框？
我想创建一个多选保管箱列表。实际上，我必须使用下拉菜单选择多个选项。当我如下所示简单地执行此操作时：
<select>
<option><input type="checkbox"></option>
</select>
然后，复选框显示在下拉字段的前面。但是我想为每个选项而不是整体创建它，以便我可以选择多个选项。有什么办法吗？
问题答案：
这是一个简单的下拉清单
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>
-
从'React'导入React，{useState}；//导入useState从'react-native-dropdown-picker'中导入DropDownPicker；从“React-Native”导入{样式表、文本、视图、文本输入、状态条、安全视图、图像、按钮、警报}；
-
问题内容： 我需要建立一个包含5个选项的菜单，单击某个菜单后，将出现一个新的子菜单。我完全不知道该怎么做。 问题答案： CSS没有点击处理程序。因此，不可能使用标准CSS。您可以使用一种称为“复选框hack”的方法，但是我谦虚地认为，它有点笨拙，并且会像您的用例要求那样在导航菜单中使用，这很尴尬。因此，我建议使用jQuery或Javascript。这是使用jQuery的一种非常简单的解决方案。 基
-
问题内容： 如何设置HTML复选框，单选按钮和下拉菜单的样式？可以吗 我想为复选框或单选按钮使用图像，对列表使用相同的图像-下拉箭头在大多数情况下看起来不太好。 问题答案： 请参阅jQuery插件的2个链接（用于样式化复选框和单选按钮）： http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio- buttons ht
-
问题内容： 我正在一个涉及使用PHP脚本自动填充选择框的网站上工作。一切都很好，除了问题是我用来填充文本框的标题非常长（它们是期刊文章和演示文稿标题）。下拉框延伸到最长元素的宽度，该元素延伸超出屏幕边缘，因此使滚动条无法触及。我尝试了多种尝试使用CSS手动将下拉框设置为特定宽度的方法，但到目前为止都无济于事。我最好地完成了将“选择”框设置为特定宽度的操作，但是下拉菜单本身的宽度要大得多。 任何对此
-
问题内容： 我正在一个涉及使用PHP脚本自动填充选择框的网站上工作。除了问题是我用来填充文本框的标题非常长（它们是期刊文章和演示文稿标题）外，所有其他方法都工作正常。下拉框延伸到最长元素的宽度，该元素延伸超出屏幕边缘，因此使滚动条无法触及。我尝试了多种尝试使用CSS手动将下拉框设置为特定宽度的方法，但到目前为止都无济于事。我所能做到的最好的事情是将“选择”框设置为一定的宽度，但是下拉菜单本身要宽得
-
问题内容： 我想知道是否有可能让jQuery 在下拉框中选择，例如第4个项目？ 我希望用户单击一个链接，然后让该框更改其值，就像用户通过单击来选择它一样。 问题答案： 怎么样 对于现代版本的jquery，应使用代替