jQuery基于另一个选择进行多次更改选择

Question

我根据第一个选择创建了两个要填充的块。此时，只有第一个块是自填充的。我希望两个区块都能独立工作。谢谢

PS：div.block的数量是动态的，它们可以多于或少于两个块

cars = new Array("Mercedes", "Volvo", "BMW", "porche");
phones = new Array('Samsung', 'Nokia', 'Iphone');
names = new Array('Kasper', 'Elke', 'Fred', 'Bobby', 'Frits');
colors = new Array('blue', 'green', 'yellow');
populateSelect();
$(function() {
$('#cat').change(function() {
populateSelect();
});
});
function populateSelect() {
cat = $('#cat').val();
$('#item').html('');
eval(cat).forEach(function(t) {
$('#item').append('<option>' + t + '</option>');
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
<select id="cat">
<option val="cars">cars</option>
<option val="phones">phones</option>
</select>
<select id="item">
</select>
</div>
<div class="block">
<select id="cat">
<option val="names">names</option>
<option val="colors">colors</option>
</select>
<select id="item">
</select>
</div>

Answer 1

这就是如何更新代码以动态填充项下拉列表的方法。首先，尽量避免使用重复的Id。我已将您的cat id重命名为cat-1和cat-2，并应用了一个"类别">类。因此，将更改事件绑定到类是避免重复代码的好做法。使用next jquery方法填充项目下拉列表。

var cars = new Array("Mercedes", "Volvo", "BMW", "porche");
var phones = new Array('Samsung', 'Nokia', 'Iphone');
var names = new Array('Kasper', 'Elke', 'Fred', 'Bobby', 'Frits');
var colors = new Array('blue', 'green', 'yellow');
$(function () {
var allCategories = $('.categories');
if (allCategories && allCategories.length > 0) {
$.each(allCategories, function(index, category) {
populateSelect($(category));   
});
}
$('.categories').change(function () {
var selectEle$ = $(this);
populateSelect(selectEle$);
});
});
function populateSelect(selectEle$) {

var cat = selectEle$.val();
if (cat) {

selectEle$.next().html('');
eval(cat).forEach(function (t) {
selectEle$.next().append('<option>' + t + '</option>');
});
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
<select id="cat-1"class="categories">
<option val="cars">cars</option>
<option val="phones">phones</option>
</select>
<select id="item-1">
</select>
</div>
<div class="block">
<select id="cat-2" class="categories">
<option val="names">names</option>
<option val="colors">colors</option>
</select>
<select id="item-2">
</select>
</div>

因此，在页面加载时，您不会预先填充这些下拉列表，因为cat下拉列表中没有选定的值。