我创建了一个下拉栏，单击时它也会填充带有子分支的复选框树。现在，我真正想要的是，当我选择复选框树中显示的几个选项时，它们应该填充在顶部下拉栏的顶部，这样我就可以知道，我有在下面显示的复选框树中选择了这些选项。
请任何人帮助我纠正代码中的错误。
这是我的代码，
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.multiselect {
width: 300px;
}
.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;
}
</style>
<body>
<div class="container">
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<label>Page Permission</label>
<select>
<label>Page Permission</label>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<input type="checkbox" name="Page Action1" value="Page"> Page Action 1<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action1" value="Page1"> Page 1<br>
<input type="checkbox" name="Page Action1" value="Page1"> Page 2<br>
<input type="checkbox" name="Page Action1" value="Page1"> Page 3<br>
</ul>
<input type="checkbox" name="Page Action2" value="Page"> Page Action 2<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action2" value="Page1"> Page 1<br>
<input type="checkbox" name="Page Action2" value="Page1"> Page 2<br>
<input type="checkbox" name="Page Action2" value="Page1"> Page 3<br>
</ul>
<input type="checkbox" name="Page Action3" value="Page"> Page Action 3<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action3" value="Page1"> Page 1<br>
<input type="checkbox" name="Page Action3" value="Page1"> Page 2<br>
<input type="checkbox" name="Page Action3" value="Page1"> Page 3<br>
</ul>
<input type="checkbox" name="Page Action4" value="Page"> Page Action 4<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action4" value="Page1"> Page 1<br>
<input type="checkbox" name="Page Action4" value="Page1"> Page 2<br>
<input type="checkbox" name="Page Action4" value="Page1"> Page 3<br>
</ul>
<input type="checkbox" name="Page Action5" value="Page"> Page Action 5<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action5" value="Page1"> Page 1<br>
<input type="checkbox" name="Page Action5" value="Page1"> Page 2<br>
<input type="checkbox" name="Page Action5" value="Page1"> Page 3<br>
</ul>
</div>
</div>
</form>
</div> </div>
</html>
<script>
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;
}
}
</script>
最佳答案
请仔细检查下面添加的代码。我又添加了一个额外的 div 来显示具有 id“检查”的选定值。此外，我还更改了复选框的值以识别单击的复选框。
<div class="container">
<form>
<div id="checks"></div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<label>Page Permission</label>
<select>
<option>Page Permission</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<input type="checkbox" name="Page Action1" value="Page"> Page Action 1<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action1" value="Page11"> Page 1<br>
<input type="checkbox" name="Page Action1" value="Page12"> Page 2<br>
<input type="checkbox" name="Page Action1" value="Page13"> Page 3<br>
</ul>
<input type="checkbox" name="Page Action2" value="Page"> Page Action 2<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action2" value="Page21"> Page 1<br>
<input type="checkbox" name="Page Action2" value="Page22"> Page 2<br>
<input type="checkbox" name="Page Action2" value="Page23"> Page 3<br>
</ul>
<input type="checkbox" name="Page Action3" value="Page"> Page Action 3<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action3" value="Page31"> Page 1<br>
<input type="checkbox" name="Page Action3" value="Page32"> Page 2<br>
<input type="checkbox" name="Page Action3" value="Page33"> Page 3<br>
</ul>
<input type="checkbox" name="Page Action4" value="Page"> Page Action 4<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action4" value="Page41"> Page 1<br>
<input type="checkbox" name="Page Action4" value="Page42"> Page 2<br>
<input type="checkbox" name="Page Action4" value="Page43"> Page 3<br>
</ul>
<input type="checkbox" name="Page Action5" value="Page"> Page Action 5<br>
<ul class="dropdown">
<input type="checkbox" name="Page Action5" value="Page51"> Page 1<br>
<input type="checkbox" name="Page Action5" value="Page52"> Page 2<br>
<input type="checkbox" name="Page Action5" value="Page53"> Page 3<br>
</ul>
</div>
</div>
</form>
</div>
以下是 jquery 代码，它将在菜单栏顶部显示选中的复选框值，并在取消选中同一复选框时将其删除。
$(document).ready(function() {
$(":checkbox").click (function(){
//alert($(this).val());
if($(this).prop('checked') == true){
$("#checks").append(" <span id='"+$(this).val()+"'>"+$(this).val()+"</span>");
}
else {
$("#"+$(this).val()).remove();
}
});
});
关于javascript - 显示在复选框树中选择的选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35340349/