javascript - 更改动态创建的选择的 onchange 事件以填充另一个动态创建的选择

Question

我有 2 个选择框，id 为 select1 和 otherselect1。我在 select1 上触发了一个 onchange 事件以将数据附加到 otherselect1。

现在我通过将 id 增加到 +1 来动态添加多个这些选择框组合。例如:select2 和 otherselect2，select3 和 otherselect3。

问题是我如何编写 onchange 事件，这样如果我更改 select2 它只会影响 otherselect2 的数据，同样适用于 select3 和 otherselect3。

代码:

    $('.select_type').on('change', function() {
        var channel_type = $(this).val();

        return  $.ajax({
            url: __SITE.baseUrl ,
            data: "channel_type=" + channel_type
            success: function (data)
            {
                if (data) {
                    data = JSON.parse(data);
                    var total = data.length;
                    $(this).next('.select_user').html('');
                    $(this).next('.select_user').append($('<option/>', {value: '', text : 'Choose One'}));
                    for(var i=0; i < total; i++)
                    {
                        $(this).next('.select_user').append($('<option/>', {value: data[i]['id'], text : data[i]['name']}));
                    }
                }
            }
        });
    });

Answer 1

分别与所有select和otherselect保持相似的类名，并使用next()追加从.select中选择的数据 下拉列表到 .otherselect。检查以下代码段以供引用。

$('.select').on('change', function() {
  $(this).next('.other-select').append($('<option>', {
    text: $(this).val()
  }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
  <select class="other-select">
</select>
</div>
<div>
  <select class="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
  <select class="other-select">
</select>
</div>
<div>
  <select class="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
  <select class="other-select">
</select>
</div>