更改onchange事件的動態創建選擇填充另一個動態創建的選擇

Question

我有2個選擇框與ID select1和otherselect1。我在select1上發起onchange事件以將數據附加到otherselect1。

現在我通過將id增加到+1來動態地添加多個這些選擇框組合。例如：select2和其他選擇2,select3和其他選擇3。

的問題是，我怎麼寫onchange事件，這樣如果我改變選擇2只會影響otherselect2數據，同樣爲選擇三和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

我解決它自己。

加入的onclick = 「javascript_function（this.id）」所有選擇1並使用該ID在javascript_function調用相應的otherselect1

Answer 2

分別保持同級名稱全部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>