更改创建的动态 select 的 onchange 事件以填充创建的另一个动态 select

Question

我有 2 个 select 盒子，id 为 select1 和 otherselect1 .我在 select1 上触发了一个 onchange 事件，将数据附加到 otherselect1.

现在，我通过将 id 增加到 +1 来动态添加多个 select 框组合。例如：select2 and otherselect2, select3 and otherselect3.

问题是我该如何编写 onchange 事件，这样如果我更改 select2 它只会影响 other[ 的数据=41=]2，类似 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 保留相似的 class 名称，并使用 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>

Answer 2

我自己解决了

对所有select1添加onclick="javascript_function(this.id)"并在javascript_function中使用此id调用对应otherselect1

更改创建的动态 select 的 onchange 事件以填充创建的另一个动态 select

change onchange event of dynamic created select to populate another dynamic created select

javascript

jquery

onchange