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

Question

我正在尝试写入一个函数。当我选中一个复选框时，属于该复选框的项目会出现在下拉菜单中，当我取消选中它时，它会从 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>

Answer 1

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

仅适用于类别 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>