将选项对象添加到javascript中的2个选择框

Question

我是javascript新手；我正在尝试将文本框中的值动态添加到2个选择框中。

输入值（节点名称）后，我想将该名称添加到2个选择框srcNodes和targetNodes中，但这只是将选项添加到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 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");
    option.text = n;
    s.add(option);
		t.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 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 option1 = document.createElement("option");
    var option2 = document.createElement("option");

    option1.text = n;
    option2.text = n;
    s.add(option1);
    t.add(option2);

  }
</script>