動的リストの別のドロップダウンオプションに基づいてドロップダウンオプションを変更します

Question

施設のドロップダウン値をドロップダウン都市から変更しようとしています。行は動的に追加されます。 selectC1を使用してselectE1を変更する方法

<script> 
    var olList = $('#olcityList'); 

    var $li = $('li.list').clone(); 


    // Addding a new list element to the list 
    $('#plus').click(function(){ 
     var index = olList.find('li').length+1; 

     //Create clone to manipulate its elements 
     var li = $li.clone(); 
     li.attr('id', index); 
     li.find('.city select').attr('id', 'selectC' + index); 
     li.find('.esta select').attr('id', 'selectE' + index); 

     olList.append(li); 
    }); 

    // Get the selectC id when changed 
    $('select').change(function(){ 

    console.log("parent id: " + $(this).closest('li').attr('id')); 
    console.log("Current id: " + $(this).attr('id')); 

    // To manipulate SelectE id 
    var tempParentId= $(this).closest('li').attr('id'); 
    console.log($('#estaList'+tempParentId).val() ); 

}); 
</script> 

<!-- language: lang-html --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<ol id="olcityList"> 
     <li class="list" id="1"> 
      <div class="city"> 
       <select id="selectC1"> 
        <option value=1>Delhi</option> 
        <option value=2>Mumbai</option> 
       </select> 
      </div> 

      <div class="esta"> 
       <select id="selectE1"> 
        <option value="1">Delhi 1</option> 
        <option value="1">Delhi 2</option> 
        <option value="2">Mumbai 2 </option> 
        <option value="2">Mumbai 1</option> 
       </select> 
      </div> 
     </li> 
</ol> 

jspを使用してドロップダウンテキストと値を入力します。 ただし、selectは一度作業しても機能しません。あなたがDOMを操作しているのでrefrence
Use jQuery to change a second select list based on the first select list option

Answer 1

としてこれを使用して

を動的にあなたはプラスボタンを押すたびに-handler .change()を呼び出す必要がプラスボタンを聖霊降臨祭。

このコードを試してみてください。

$(document).ready(function(){ 
    myChange(); 
}) 

var olList = $('#olcityList'); 

var $li = $('li.list').clone(); 

// Addding a new list element to the list 
$('#plus').click(function() { 
    var index = olList.find('li').length + 1; 

    //Create clone to manipulate its elements 
    var li = $li.clone(); 
    li.attr('id', index); 
    li.find('.city select').attr('id', 'selectC' + index); 
    li.find('.esta select').attr('id', 'selectE' + index); 

    olList.append(li); 
    myChange() 
}); 

function myChange() { 
    // Get the selectC id when changed 
    $('select').change(function() { 

    console.log("parent id: " + $(this).closest('li').attr('id')); 
    console.log("Current id: " + $(this).attr('id')); 

    // To manipulate SelectE id 
    var tempParentId = $(this).closest('li').attr('id'); 
    console.log($('#estaList' + tempParentId).val()); 

    }); 
}