我需要目标下拉列表依赖于我的模型下拉列表。每当用户在目的地列表中选择一个选项时,就会生成文本框和标签。但是,我搞砸了我的 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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句