我创建了包含多个下拉列表的页面。 其中一个下拉列表根据另一个下拉列表的选择进行填充。 我还在页面末尾添加了一个按钮。当我选择“再添加一个项目”时，我需要再添加一列。 问题是当我运行代码时，一切运行良好。当我单击“添加一个项目”按钮时，它不会根据第一个下拉列表的选择显示第二个下拉列表。只显示上面选择的一个下拉列表。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
Dals=new Array("Moong","Chana","Ground","nut");
Flour=new Array('Chana','ravva','Gram');
$(function() {
populateSelect();
$('#cat').change(function(){
populateSelect();
});
});
function populateSelect(){
cat=$('#cat').val();
$('#item').html('');
if(cat=='Dals'){
Dals.forEach(function(t) {
$('#item').append('<option>'+t+'</option>');
});
}
if(cat=='Flour'){
Flour.forEach(function(t) {
$('#item').append('<option>'+t+'</option>');
});
}
}
function validateForm(){
var x=document.getElementByName("car[]");
if(x.length == 0 || x[0].value == null || x[0].value == "")
{
alert("Select atleast one grocery.");
return false;
}
}
function add(tbl1) {
var tb = document.getElementById(tbl1);
var rowCount = tb.rows.length;
var row = tb.insertRow(rowCount);
var colCount = tb.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newCell = row.insertCell(i);
newCell.innerHTML = tb.rows[1].cells[i].innerHTML;
}
}
</script>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
<table id=cars border=1>
<tr><td>Category</td><td>Name</td></tr>
<tr>
<td><select name=car[] id="cat">
<option value="Dals">Dals</option>
<option value = "Flour">Flour</option>
</select></td>
<td><select name=car[] id="item">
</select></td>
</tr>
</table><br>
<p><input type=button value="Add one more item" onclick="add('cars')"/></p>
<center><input type=submit value=submit></center>
</form>
</body>
</html>