我正在尝试创建一个带有复选框的下拉列表，其中下拉列表中的值取决于外部复选框。
这就是我目前拥有的。
HTML
<div class="region-checkboxes">
<input type="checkbox" name="na" value="NA" />
<span style="width:25px;display:inline-block;">NA</span>
<input type='checkbox' name="eu" value="EU" />
<span style="width:25px;display:inline-block;">EU</span>
<input type='checkbox' name="apac" value="APAC" />
<span style="width:40px;display:inline-block;">APAC</span>
<input type='checkbox' name="cn" value="CN"/>
<span style="width:25px;display:inline-block;">CN</span>
JS
var allvalue = []
var checkboxes = document.querySelectorAll('.region-checkboxes input');
checkboxes.forEach(function(item) {
item.addEventListener('click', onChangeCheckbox);
});
function onChangeCheckbox (checkbox) {
console.log(checkbox.currentTarget.value);
if (checkbox.currentTarget.checked) {
allvalue.push(checkbox.currentTarget.value);
allvalue.sort();
}
else {
var index = allvalue.indexOf(checkbox.currentTarget.value);
if(index > -1){
allvalue.splice(index,1);
}
}
}
我想做的是基于所选的复选框，它将用其他值填充复选框下拉列表。在此示例中，它将根据您选择的区域填充子区域。
因此，如果您选择“NA”复选框，下拉列表将填充 [“NA”、“LA”]；如果您选择“EU”复选框，下拉列表将填充 [“WEU”、“EEU”、“RU”]，如果您选择两者，它将用两个数组填充下拉列表。这就是我的想法。
http://jsfiddle.net/evfnLn0x/712/
所以现在的问题是。我不知道如何设置我的代码，以便它动态地执行。当外部复选框未被选中时，我还需要下拉复选框列表来删除子区域。我整晚都在为此苦苦挣扎。
最佳答案
我会做如下的事情:
var allvalue = []
var checkboxes = document.querySelectorAll('.region-checkboxes input');
for (var k = 0; k < checkboxes.length; k++) {
checkboxes[k].addEventListener('click', onChangeCheckbox);
};
// Does not work in Firefox
//checkboxes.forEach(function(item) {
//item.addEventListener('click', onChangeCheckbox);
//});
function onChangeCheckbox(checkbox) {
console.log(checkbox.currentTarget.value);
if (checkbox.currentTarget.checked) {
allvalue.push(checkbox.currentTarget.value);
allvalue.sort();
} else {
var index = allvalue.indexOf(checkbox.currentTarget.value);
if (index > -1) {
allvalue.splice(index, 1);
}
}
renderDropdown();
}
function renderDropdown() {
// will be called on each click on any checkboxes
var div = document.querySelector("#dropdown")
var select = document.createElement("select");
for (var i = 0; i < allvalue.length; i++) {
// get subregions from the below dropdown object mapping
var subRegion = dropdown[allvalue[i]];
if (subRegion && subRegion.length) {
for (var j = 0; j < subRegion.length; j++) {
var option = document.createElement("option");
option.value = subRegion[j];
option.selected = "";
option.innerHTML = subRegion[j];
select.appendChild(option);
}
div.innerHTML = "";
div.appendChild(select);
}
}
}
var dropdown = {
"NA": ["NA", "LA"],
"EU": ["WEU", "EEU", "RU"],
"APAC": ["KR", "TW", "SG", "ANZ", "JP", "CN"]
}.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;
}<body>
<div class="region-checkboxes">
<input type="checkbox" name="na" value="NA" />
<span style="width:25px;display:inline-block;">NA</span>
<input type='checkbox' name="eu" value="EU" />
<span style="width:25px;display:inline-block;">EU</span>
<input type='checkbox' name="apac" value="APAC" />
<span style="width:40px;display:inline-block;">APAC</span>
<input type='checkbox' name="cn" value="CN" />
<span style="width:25px;display:inline-block;">CN</span>
</div>
<div id="dropdown"></div>
</body>已更新
关于javascript - 如何动态地从下拉列表中添加和删除复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39092738/