基于另一个选择的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，并应用了一个[['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');

      //  populateSelect();
        $(function () {
            $('.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下拉列表中没有选定的值，因此不会预先填充这些下拉列表。