Question

我有两个选择框，其中包含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。请查看下面的代码段以供参考。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我自己解决了。

将 onclick =“javascript_function（this.id）”添加到所有 select1 ，并在javascript_function中使用此ID来调用相应的 otherselect1 < / p>

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

2 个答案: