我创建了一个下拉栏,当单击它时,它也会在子目录中填充复选框树。现在,我真正想要的是,当我选择复选框树中显示的几个选项时,应该将它们填充在顶部下拉栏的顶部,以便我知道在下面显示的复选框树中选择了许多选项。
请任何人通过纠正我的代码中的错误来帮助我。
这是我的代码,
<!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“ checks”的选定值。另外,我还更改了复选框的值以标识单击的复选框。
<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();
}
});
});