Мне нужно, чтобы выпадающий список назначения зависел от выпадающего списка моей модели.И всякий раз, когда пользователь выберет опцию в списке адресатов, будут сгенерированы текстовое поле и метка.Тем не менее, я испортил цикл 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>