javascript - 如何在选择框中添加多个选项
问题描述
我想使用仅使用 javascript 的复选框添加多个选择选项.. 不在 jQuery 中。
<select class="form-control">
<option value="0">--- Please Select ----</option>
<option>html</option>
</select>
解决方案
您想要实现的目标尚不清楚,但是...<br> 您不能将复选框作为option
s 放置在select
元素内。
但是,您可以伪造它做那种事情:
var expanded = false;
var checkboxes = document.getElementById("checkboxes");
function toggleCBs() {
expanded = !expanded;
if (expanded) {
checkboxes.style.display = "block";
} else {
checkboxes.style.display = "none";
}
}
.multiselect {
width: 160px;
}
.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="toggleCBs()">
<select class="form-control">
<option value="0">---- Please Select ----</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label>
<input type="checkbox"/>HTML</label>
<label>
<input type="checkbox"/>CSS</label>
<label>
<input type="checkbox"/>JS</label>
</div>
</div>
</form>
灵感来自:如何在 Select Option 中使用 Checkbox
我希望它有所帮助。
推荐阅读
- python - 无法使用 sklearn 库中的 fit_transform 估算一维数组(拆分测试)
- android - 使用导航组件向后导航
- javascript - 在 vscode 扩展中导入依赖项返回未定义
- python - 在 python 中动态生成“X”个队列
- python - 在预训练的 VGG16 模型中激活 dropout
- c# - 如何解决错误“已添加具有相同密钥的项目”
- python - 如果我知道它存在,为什么我 pyqt5 告诉我这个小部件不存在?
- reactjs - 带有 axios 返回多个值的 Redux Thunk 操作
- android - 应用程序在 frament 中首次请求位置许可后立即崩溃
- kubernetes - Kubernetes 多租户 - 我们是 azure 企业客户希望将特定于 AKS 命名空间的日志提取到 Log Analytics