我创建了包含多个下拉列表的页面。 其中一个下拉列表根据另一个下拉列表的选择进行填充。 我还在页面末尾添加了一个按钮。当我选择“添加一个项目”时，我需要再添加一列。 问题是当我运行代码时，一切正常。当我单击“添加一个项目”按钮时，它不会根据第一个下拉列表的选择显示第二个下拉列表。仅显示上面选择的一个下拉列表。
Javascript
<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 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>
HTML
<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>
最佳答案
首先，您必须将 id 更改为类。
然后您必须稍微修改一下 populateSelect 函数以接受上下文。
此外，您还必须在固定父级(不是动态添加的)上使用 .on() 连接事件。
这里是工作 JSFiddle 的链接:http://jsfiddle.net/StzvU/8/
Names = {"Dals" : ["Moong", "Chana", "Ground", "nut"],
"Flour" : ["Chana", "ravva", "Gram"],
"Mix" : ["GulabJamun", "RavvaDosa", "DosaMix", "IdlyMix"] };
$(document).ready(function () {
populateSelect($(document));
$('#cars').on('change', '.cat', function () {
populateSelect($(this).parents('tr'));
});
$('#moar').click(function () {
add('#cars');
});
});
function populateSelect(line) {
cat = $('.cat', line).val();
$('.item', line).html('');
Names[cat].forEach(function (t) {
$('.item', line).append('<option>' + t + '</option>');
});
}
function add(tbl1) {
$table = $(tbl1);
row = $('tr', $table).last().clone();
populateSelect(row);
$table.append(row);
}
关于javascript - 当我添加更多下拉列表时，jQuery 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19083685/