From a table row with TWO dropdowns, get selected value & which drop-down changed

Question

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

Solution

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

});

Comments

[Chandan Kumar]

nice one dude :)