javascript - 如何动态地从下拉列表中添加和删除复选框-6ren

javascript - 如何动态地从下拉列表中添加和删除复选框

转载作者：行者123 更新时间：2023-12-03 06:16:10

我正在尝试创建一个带有复选框的下拉列表，其中下拉列表中的值取决于外部复选框。

这就是我目前拥有的。

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>

  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>

已更新

Working Fiddle