javascript - 在下拉菜单中添加-删除选项

我试图写一个函数。当我选中一个复选框时，属于该复选框项的项会出现在下拉菜单中，而当我取消选中该复选框时，它会与dropdpwn相去甚远。我可以添加，但是当我取消选中复选框时无法删除。这是我的代码。

var items = [
  "#1001#item1#10.5#10#1#direc1#",
  "#1002#item2#20.5#10#2#direc2#",
  "#1003#item3#20.5#10#3#director3#",
];
    function checkboxChange(ev) {
        var count = items.length;
        var select = document.getElementById('formsec');
        for (var i = 0; i < count; i++){
            if (ev.value=="1001" &&ev.checked  ) {
                var item = items[i];
                var currentitem = item.split('#');
                if (currentitem[5]=="1" ) {
                    var opt = document.createElement('option');
                    opt.value = currentitem[1];
                    opt.innerHTML = currentitem[2];
                    select.appendChild(opt);
                }

的HTML

<td>
    Choose the item: </br>
    <input type="checkbox" id="category1" name="choice" value="1001" onchange="checkboxChange(this)" />Category1<br />
    <input type="checkbox" id="category2" name="choice" value="1002" onchange="checkboxChange(this)" />Category2<br />
    <input type="checkbox" id="category3" name="choice" value="1003" onchange="checkboxChange(this)" />Category3<br />
</td>

最佳答案

使用querySelector和select.remove()的工作示例。

仅适用于Category 1，因为OP条件：


if (ev.value == "1001")
if (currentitem[5] == "1")

var items = [
  "#1001#item1#10.5#10#1#direc1#",
  "#1002#item2#20.5#10#2#direc2#",
  "#1003#item3#20.5#10#3#director3#",
];

function checkboxChange(ev) {
  var count = items.length;
  var select = document.getElementById('formsec');
  for (var i = 0; i < count; i++) {
    if (ev.value == "1001") {
      var item = items[i];
      var currentitem = item.split('#');
      if (currentitem[5] == "1") {
        if (ev.checked) {
          var opt = document.createElement('option');
          opt.value = currentitem[1];
          opt.innerHTML = currentitem[2];
          select.appendChild(opt);
        } else {
          var opt = document.querySelector("option[value='" + currentitem[1] + "']");
          select.remove(opt);
        }
      }
    }
  }
}

<select id="formsec"></select>
<td>
  Choose the item: <br />
  <input type="checkbox" id="category1" name="choice" value="1001" onchange="checkboxChange(this)" /><label for="category1">Category1</label><br />
  <input type="checkbox" id="category2" name="choice" value="1002" onchange="checkboxChange(this)" /><label for="category2">Category2</label><br />
  <input type="checkbox" id="category3" name="choice" value="1003" onchange="checkboxChange(this)" /><label for="category3">Category3</label><br />
</td>

关于javascript - 在下拉菜单中添加-删除选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49856734/