基于另一个选择的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。我已将您的猫 ID 重命名为 cat-1 和 cat-2 并应用了 'category' 类。因此，将更改事件绑定到类是避免重复代码的好习惯。使用下一个 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 下拉菜单中没有选定的值。