javascript - 在javascript中将选项对象添加到2个选择框
问题描述
我是 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>
解决方案
您创建了一个元素,然后尝试将其插入两个不同的位置。您应该制作两个元素,然后将它们都插入。
#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>
推荐阅读
- google-chrome - 用户可以在 Chrome 扩展程序中手动清理 chrome.storage.local
- python - update nested dictionary values from another nested dictionary based on mapping already provided in the dictionary
- highcharts - 使用 highcharts 从 RangeSelector 的 'From' 'To' 字段中保存值
- spring - Thymeleaf 多次调用登录页面(spring boot)
- angular - 使用 Angular 8 在不同存储库上的多个 SPA
- c# - C# 到 SQL Server SqlBulkCopy 大行数
- php - 如何在引导模式中验证登录信息而不转到另一个页面?
- c# - 如何将 bunifu 按钮设置为接受按钮?
- sql - 从数据库中获取数据并填充分区列表
- node.js - 如何解决以 npm 作为依赖包的 npm 漏洞?