change drop-down options based on another drop-down option in Dynamic list

Question

I'm trying to change drop down values of Establishment from drop down city. The rows are added dynamically. How can i change selectE1 using selectC1

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

Populating the dropdown text and values using jsp. However select doesn't work work after once.

Using this as a refrence
Use jQuery to change a second select list based on the first select list option

score 0 · Answer 1 · answered Jan 23 '17 at 10:37

Because you are manipulating the DOM dynamically whit the plus button you need to call the .change()-handler every time you push the plus button.

Try this code:

$(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());

  });
}

change drop-down options based on another drop-down option in Dynamic list

1 Answers1