I am trying to update two cascading drop down inside a table there are many answers on SO for drop downs, but I was unable to find help on cascading updates inside a Table with dynamically added rows.

Given the many rows they all have varying Id's filter #Id does'nt work. So, How do I identify which rows Dropdown triggered the change & cascade the update another Dropdown/cell in the next col of the same row?

There are 2 DropDownList (select box) inside a table row cell. To simplify this, the first is Country -> Second is state. So a user is expected to select the country and then the state.

My pseudo algorithm:

• find which one was fired, and which row (unsure if its needed, should I wire in place)
• then fire an ajax call... to get the values based on country
• update the second drop down with value in the same table row.
• Case 1 Change country and then change state.
• Case 2 Just change State, but first get the Country value in the first dropdown of the same row.

I know how to get the change and value in a regular page, but how do I get those changes and update the adjacent dropdown.

$(document).on('change', 'select', function(){
      var data = $(this).val();
      alert(data);
});

Edit, Stephen request to show HTML

<tr>
  <td>
    //DropDown 1 (Imagine Country)
    <span class="projectcodeid"> 
      <select class="form-control" id="Records_1__TCode_Project_ID" name="Records[1].TCode.Project.ID"><option value=""></option>
       <option value="1">Plumbing</option>
       <option value="2">Modeling</option>
      </select></span>                                                    
  </td>

  <td>
    //DropDown 2 (Imagine State)
    <input type="hidden" name="Records.Index" value="1">
    <input class="timecodeid" name="Records[1].TCode.ID" type="hidden" value="5">                                                    
    <span class="timecode timecodeDdlId"> <select class="form-control timecodeDdlId" id="Records_1__TCode_ID" name="Records[1].TCode.ID"><option value=""></option>
</select></span>
    </td>

    <td>
        <input name="Records[1].DataRecords[0].ID" type="hidden" value="">
        <input class="hours" name="Records[1].DataRecords[0].Work" type="text" value="">
    </td>                                                

    <td>
       <input class="bs-checkbox" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false">
    </td>
 </tr>

Sample image for clarification

I am trying to update two cascading drop down inside a table there are many answers on SO for drop downs, but I was unable to find help on cascading updates inside a Table with dynamically added rows.

Given the many rows they all have varying Id's filter #Id does'nt work. So, How do I identify which rows Dropdown triggered the change & cascade the update another Dropdown/cell in the next col of the same row?

There are 2 DropDownList (select box) inside a table row cell. To simplify this, the first is Country -> Second is state. So a user is expected to select the country and then the state.

My pseudo algorithm:

• find which one was fired, and which row (unsure if its needed, should I wire in place)
• then fire an ajax call... to get the values based on country
• update the second drop down with value in the same table row.
• Case 1 Change country and then change state.
• Case 2 Just change State, but first get the Country value in the first dropdown of the same row.

I know how to get the change and value in a regular page, but how do I get those changes and update the adjacent dropdown.

$(document).on('change', 'select', function(){
      var data = $(this).val();
      alert(data);
});

Edit, Stephen request to show HTML

<tr>
  <td>
    //DropDown 1 (Imagine Country)
    <span class="projectcodeid"> 
      <select class="form-control" id="Records_1__TCode_Project_ID" name="Records[1].TCode.Project.ID"><option value=""></option>
       <option value="1">Plumbing</option>
       <option value="2">Modeling</option>
      </select></span>                                                    
  </td>

  <td>
    //DropDown 2 (Imagine State)
    <input type="hidden" name="Records.Index" value="1">
    <input class="timecodeid" name="Records[1].TCode.ID" type="hidden" value="5">                                                    
    <span class="timecode timecodeDdlId"> <select class="form-control timecodeDdlId" id="Records_1__TCode_ID" name="Records[1].TCode.ID"><option value=""></option>
</select></span>
    </td>

    <td>
        <input name="Records[1].DataRecords[0].ID" type="hidden" value="">
        <input class="hours" name="Records[1].DataRecords[0].Work" type="text" value="">
    </td>                                                

    <td>
       <input class="bs-checkbox" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false">
    </td>
 </tr>

Sample image for clarification

• javascript
• jquery
• ajax
• asp-mvc
• drop-down-menu

• Your need to show the html for a typical row (its just a matter of using class names and relative selectors) – user3559349 Commented Mar 12, 2017 at 8:45
• you have to give different id to all element and fire change event on particular id element – bharat savani Commented Mar 12, 2017 at 8:49
• @bharatsavani I have different Id, I can verify in code. But how do I attach change to it, since they all have different id's at runtime based on the db row? – Transformer Commented Mar 12, 2017 at 8:51
• you have to pass id instead of select in jquery like below $(document).on('change', '#id', function(){ var data = $(this).val(); alert(data); }); – bharat savani Commented Mar 12, 2017 at 8:52
• 2 @transformer, Please show the html for a typical row (and ignore the nonsense about id attributes) – user3559349 Commented Mar 12, 2017 at 8:59

2 Answers 2

Assuming that you can't identify dropdwns by class or anything. Assuming that every time you change the value in a dropdown you want to update the other dropdown on the same row. Assuming that you have only two dropdowns per row:

$('table').on('change', 'select', function() {
    var $current_dropdown = $(this),
        $other_dropdown = $(this).closest('tr').find('select').not(this);

    /// perform any task you need with current and other dropdown

});

You need to give both your <select> elements class names and use relative selectors to select the associated element in the same row.

Assuming your html is

<table id="table"> // give this an id attribute
    <tbody>
        <tr>
            <td><select class="country" ....> ..... </select></td>
            <td><select class="state" ....> ..... </select></td>
        </tr>
    </tbody>
</table>

Then your script will be

$('#table').on('change', '.country', function() {
    var selectedValue = $(this).val();
    var row = $(this).closest('tr'); // get the row
    var stateSelect = row.find('.state'); // get the other select in the same row
    // make you ajax call passing the selectedValue to your controller
    // in the success callback, update the options of stateSelect 
    $.ajax({
        url: ...
        data { id: selectedValue },
        ....
        success: function(data) {
            stateSelect.empty();
            $.each(data, function(item, index) {
                stateSelect.append($('<option></option>').val(iem.ID).text(item.Name));
            }
        }
    });
}

Refer also better way to load 2 dropdown in mvc for details of the code for populating cascading dropdownlists (consider caching the options as per the 2nd code example to avoid repeated ajax calls)