我需要目标下拉列表依赖于我模型的下拉列表。而且，只要用户在目标列表上选择一个选项，就会生成文本框和标签。但是，我搞砸了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>
答案 0 :(得分：1)
我希望这就是您想要的：
<!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>