Question

我是JS新手。我已经给出了一个示例，其中单击Add node按钮可将值添加到2个选择框中。但是，当我从srcNodes（选择框）中选择值并单击delete node按钮时，它只是从srcNodes中删除了该选项，所以我想从中删除相同的节点/选项。也targetNodes选择框。

#addNode {
  margin-left: 20px;
  width: 20%;
  height: 20px;
  font-weight: bold;
}

#deleteNode {
  margin-right: 20px;
  width: 20%;
  height: 20px;
  font-weight: bold;
}

#txtInput {
  width: 50%;
  height: 10px;
  float: left;
  padding: 10px;
}

#srcNodes {
  width: 40%;
  font-family: courier new;
  padding: 10px;
}

#targetNodes {
  width: 40%;
  font-family: courier new;
  padding: 10px;
}

<textarea id="addNodeInput" placeholder="Node Name"></textarea>
<button id="addNode" onclick="addNode();">Add</button>
<button id="deleteNode" onclick="deleteNode();">Delete</button>
<div id="nodeConsole"></div>

<select id="srcNodes" size="8"> </select>
<select id="targetNodes" size="8"> </select>

<script>
  var cmd = "";

  var inNode = document.getElementById("addNodeInput");
  var out = document.getElementById("nodeConsole");

  function display() {
    out.value = "Node Operations";
    out.innerHTML = cmd + out.innerHTML;
    cmd = "";
  }

  function deleteNode() {
    var x = document.getElementById("srcNodes");
    var y = document.getElementById("targetNodes");

    if (x.length > 0) {
      x.remove(x.selectedIndex);
      y.remove(x.selectedIndex);
    }
  }

  function addNode() {
    var n = inNode.value;
    cmd = ">>>" + n + "<br />";
    //display(cmd);
    inNode.value = "";
    inNode.focus();
    var s = document.getElementById("srcNodes");
    var t = document.getElementById("targetNodes");
    var option = document.createElement("option");
    var option2 = document.createElement("option");
    option2.text = n;
    t.add(option2);
    option.text = n;
    s.add(option);
  }
</script>

Answer 1

从第一个选择中删除该值后，不再选择该值，因此所选索引不存在。您需要先将所选索引存储在变量中，然后才能将其从两个选择中删除。

#addNode {
  margin-left: 20px;
  width: 20%;
  height: 20px;
  font-weight: bold;
}

#deleteNode {
  margin-right: 20px;
  width: 20%;
  height: 20px;
  font-weight: bold;
}

#txtInput {
  width: 50%;
  height: 10px;
  float: left;
  padding: 10px;
}

#srcNodes {
  width: 40%;
  font-family: courier new;
  padding: 10px;
}

#targetNodes {
  width: 40%;
  font-family: courier new;
  padding: 10px;
}

<textarea id="addNodeInput" placeholder="Node Name"></textarea>
<button id="addNode" onclick="addNode();">Add</button>
<button id="deleteNode" onclick="deleteNode();">Delete</button>
<div id="nodeConsole"></div>

<select id="srcNodes" size="8"> </select>
<select id="targetNodes" size="8"> </select>

<script>
  var cmd = "";

  var inNode = document.getElementById("addNodeInput");
  var out = document.getElementById("nodeConsole");

  function display() {
    out.value = "Node Operations";
    out.innerHTML = cmd + out.innerHTML;
    cmd = "";
  }

  function deleteNode() {
    var x =  document.getElementById("srcNodes");
    var y = document.getElementById("targetNodes");

    if (x.length > 0) {
    　var selected =  x.selectedIndex;
      x.remove(selected);
      y.remove(selected);
    }
  }

  function addNode() {
    var n = inNode.value;
    cmd = ">>>" + n + "<br />";
    //display(cmd);
    inNode.value = "";
    inNode.focus();
    var s = document.getElementById("srcNodes");
    var t = document.getElementById("targetNodes");
    var option = document.createElement("option");
    var option2 = document.createElement("option");
    option2.text = n;
    t.add(option2);
    option.text = n;
    s.add(option);
  }
</script>

同时从2个选择框中删除相同选项

1 个答案: