我是 JavaScript 新手;我正在尝试将文本框中的值动态添加到 2 个选择框。
输入值(节点名称)后,我想将该名称添加到 2 个选择框 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 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>
最佳答案
您创建了一个元素,然后尝试将其插入到两个不同的位置。您应该创建两个元素,然后将它们都插入。
#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>
关于javascript - 在 javascript 中将选项对象添加到 2 个选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51331781/