javascript - 基于另一个下拉列表的动态文本框和下拉列表 -javascript
问题描述
我需要目标下拉列表依赖于我的模型的下拉列表。每当用户在目标列表中选择一个选项时,都会生成文本框和标签。但是,我的 for 循环搞砸了,所以每当用户添加目的地时,模型 A.1 和模型 A.2 的值就会出现,并且当用户选择模型 B 时,目的地应该是模型 B 的。
请帮我。我仍在努力学习 html/javascript/jquery 这是我到目前为止的进展:
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
padding:15px;
font-weight: normal;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("addbtn").addEventListener("click", function(){
createOptionList();
dynamicObjects();
});
};
function createOptionList() {
var destination = document.getElementById("destination");
var array = ["Model-A.1", "Model-A.2", "Model-A.3", "Model-A.4"];
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
destination.appendChild(selectList);
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
var des = document.getElementById("destination");
var br = document.createElement("br");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
destination.appendChild(br);
}
}
function dynamicObjects() {
var cri = document.getElementById("criteria").value
var criteria = document.getElementById("criteria");
var qty = document.getElementById("qty");
var cell = document.getElementById("cell");
var option = document.getElementsByTagName ("option");
var blank = "";
for (var i = 0; i < option.length; i++ ){
var wrapper = document.createElement("span");
var textbox = document.createElement("input");
var textbox1 = document.createElement("input");
var br = document.createElement("br");
blank = option[i].innerText;
if (blank == "Model-A.1"){
wrapper.className = blank;
textbox.className = blank;
wrapper.innerText = "Good/n";
criteria.appendChild(wrapper);
criteria.appendChild(br);
qty.appendChild(textbox)
qty.appendChild(br)
cell.appendChild(textbox1)
cell.appendChild(br)
} else if (blank == "Model-A.2"){
wrapper.className = blank;
textbox.className = blank;
wrapper.innerText = "Fine/n";
criteria.appendChild(wrapper);
criteria.appendChild(br);
qty.appendChild(textbox)
qty.appendChild(br)
cell.appendChild(textbox1)
cell.appendChild(br)
}
}
}
</script>
</head>
<body>
<div class = "container">
<table class = "table">
<tr><td> MODEL: </td><td>
<select id="model" name="model" onchange="populate(this.id, 'destination')" >
<option value="select">--Select Model--</option>
<option value="Model-A">Model-A</option>
<option value = "Model-B"> Model-B </option>
</select> </td></tr>
</table>
<input type="button" id="addbtn" value="Add Destination"/>
<hr>
<table>
<tr>
<th><center> DESTINATION: </th></center>
<th><center> CRITERIA: </th></center>
<th><center> QTY: </th></center>
<th><center> CELL: </th></center>
</tr>
<tr>
<td width = "140"><center><div id="destination" style = "width:230px; word-wrap: break-word"></center></div></td>
<td width = "140"><center><div id="criteria" style = "width:350px; word-wrap: break-word"></center></div></td>
<td width = "140"><center><div id = "qty" required></td></center>
<td width = "140"><center><div id = "cell" required></td></center>
</tr>
</table>
</body>
</html>
解决方案
我希望这就是你要找的:
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
padding:15px;
font-weight: normal;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("addbtn").addEventListener("click", function(){
createOptionList();
});
};
function createOptionList() {
var destination = document.getElementById("destination");
var letter = document.getElementById('model').value;
if (letter!="select"){
var array = [`${letter}.1`, `${letter}.2`, `${letter}.3`, `${letter}.4`];
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
destination.appendChild(selectList);
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
var des = document.getElementById("destination");
var br = document.createElement("br");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
destination.appendChild(br);
}
dynamicObjects();
}
}
function dynamicObjects() {
var cri = document.getElementById("criteria").value
var criteria = document.getElementById("criteria");
var qty = document.getElementById("qty");
var cell = document.getElementById("cell");
var option = document.getElementsByTagName ("option");
var blank = "";
for (var i = 0; i < option.length; i++ ){
var wrapper = document.createElement("span");
var textbox = document.createElement("input");
var textbox1 = document.createElement("input");
var br = document.createElement("br");
blank = option[i].innerText;
if (blank == "Model-A.1"){
wrapper.className = blank;
textbox.className = blank;
wrapper.innerText = "Good/n";
criteria.appendChild(wrapper);
criteria.appendChild(br);
qty.appendChild(textbox)
qty.appendChild(br)
cell.appendChild(textbox1)
cell.appendChild(br)
} else if (blank == "Model-A.2"){
wrapper.className = blank;
textbox.className = blank;
wrapper.innerText = "Fine/n";
criteria.appendChild(wrapper);
criteria.appendChild(br);
qty.appendChild(textbox)
qty.appendChild(br)
cell.appendChild(textbox1)
cell.appendChild(br)
}
}
}
</script>
</head>
<body>
<div class = "container">
<table class = "table">
<tr><td> MODEL: </td><td>
<select id="model" name="model" onchange="populate(this.id,
'destination')" >
<option value="select">--Select Model--</option>
<option value="Model-A">Model-A</option>
<option value = "Model-B"> Model-B </option>
</select> </td></tr>
</table>
<input type="button" id="addbtn" value="Add Destination"/>
<hr>
<table>
<tr>
<th><center> DESTINATION: </th></center>
<th><center> CRITERIA: </th></center>
<th><center> QTY: </th></center>
<th><center> CELL: </th></center>
</tr>
<tr>
<td width = "140"><center><div id="destination" style = "width:230px;
word-wrap: break-word"></center></div></td>
<td width = "140"><center><div id="criteria" style = "width:350px;
word-wrap: break-word"></center></div></td>
<td width = "140"><center><div id = "qty" required></td></center>
<td width = "140"><center><div id = "cell" required></td></center>
</tr>
</table>
</body>
</html>
推荐阅读
- sql-server - 如果任何级别的子级或子级的子级没有实用值,则删除一个元素
- node.js - 为什么变量未定义?- 节点 - ElectronJs
- python - 为什么下面的代码返回 Null 而不是“0123456789”
- c - 你如何在C中打印版权符号?
- c - 使用 char 指针打印整数变量的值
- c# - IBM.Data.DB2.Core 在 azure 函数应用程序中引发异常
- python - 如何从文件 1 和文件 2 打印行,其中文件 1 中的第 9 列小于文件 2 中的第 4 列
- node.js - 在 NextJS 中使用动态导入时如何访问 ReactQuill Ref?
- python - Python:如何从 CSV 文件中读取键值对?
- ios - 如何在 Swift 中处理异步 http 请求