如何動態地從下拉列表中添加和刪除複選框

Question

我想創建一個帶複選框的下拉列表，其中下拉列表中的值取決於外部複選框。

這是我目前有。

http://jsfiddle.net/m1hawe54/

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); 
      } 
     } 
    } 

我想要做的是基於選中的複選框，它將填充其他值的複選框下拉列表。在本例中，它將根據您選擇的區域填充子區域。

所以如果您選擇「EU」複選框，如果您選擇「NA」複選框，[「WEU」，「EEU」，「RU」]，則下拉列表將填充[「NA」，「LA」 ，如果您同時選擇兩個數組，它將使用兩個數組填充下拉列表。這是我的想法。

http://jsfiddle.net/evfnLn0x/712/

所以，現在的問題是。我不知道如何設置我的代碼，因此它是動態的。當外部複選框被取消選中時，我還需要下拉複選框列表來刪除子區域。我一直在用這個掙扎着。

Answer 1

我會做類似如下：

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>

更新

Working Fiddle