title: From a table row with TWO dropdowns, get selected value & which drop-down changed
body: <p>I am trying to <em>update two cascading drop down inside a table</em> there are many answers on <a href="https://stackoverflow.com/questions/12442743/drop-down-select-to-change-a-second-drop-down-select-automatically">SO</a> for drop downs, but I was unable to find help on <code>cascading updates</code> inside a <code>Table</code> with <code>dynamically added rows</code>.</p>
  
  <p>Given the many rows they all have varying Id's <code>filter #Id</code> does'nt work. So, <strong>How do I identify <em>which rows Dropdown triggered the change</em> &amp; <em>cascade the update another Dropdown/cell</em> in the next col of the same row</strong>?</p>
  
  <p>There are 2 <code>DropDownList</code> (select box) inside a table row cell. To simplify this, the first is <code>Country</code> -> Second is <code>state</code>. So a user is expected to select the country and then the state.</p>
  
  <hr>
  
  <p>My pseudo algorithm:    </p>
  
  <ul>
  <li>find which one was fired, and which row (<em>unsure if its needed, should I wire in place</em>)</li>
  <li>then fire an ajax call... to get the values based on country</li>
  <li>update the second drop down with value in the same table row.</li>
  <li>Case <strong>1</strong> Change country <em>and then</em> change state. </li>
  <li>Case <strong>2</strong> Just change State, <em>but first get the Country value</em> in the first dropdown of the same row.</li>
  </ul>
  
  <hr>
  
  <p>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.</p>
  
  <pre><code>$(document).on('change', 'select', function(){
        var data = $(this).val();
        alert(data);
  });
  </code></pre>
  
  <hr>
  
  <p>Edit, Stephen request to show HTML</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td&gt;
      //DropDown 1 (Imagine Country)
      &lt;span class="projectcodeid"&gt; 
        &lt;select class="form-control" id="Records_1__TCode_Project_ID" name="Records[1].TCode.Project.ID"&gt;&lt;option value=""&gt;&lt;/option&gt;
         &lt;option value="1"&gt;Plumbing&lt;/option&gt;
         &lt;option value="2"&gt;Modeling&lt;/option&gt;
        &lt;/select&gt;&lt;/span&gt;                                                    
    &lt;/td&gt;
  
    &lt;td&gt;
      //DropDown 2 (Imagine State)
      &lt;input type="hidden" name="Records.Index" value="1"&gt;
      &lt;input class="timecodeid" name="Records[1].TCode.ID" type="hidden" value="5"&gt;                                                    
      &lt;span class="timecode timecodeDdlId"&gt; &lt;select class="form-control timecodeDdlId" id="Records_1__TCode_ID" name="Records[1].TCode.ID"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;/select&gt;&lt;/span&gt;
      &lt;/td&gt;
  
      &lt;td&gt;
          &lt;input name="Records[1].DataRecords[0].ID" type="hidden" value=""&gt;
          &lt;input class="hours" name="Records[1].DataRecords[0].Work" type="text" value=""&gt;
      &lt;/td&gt;                                                
  
      &lt;td&gt;
         &lt;input class="bs-checkbox" name="Records[1].DeleteRow" type="checkbox" value="true"&gt;&lt;input name="Records[1].DeleteRow" type="hidden" value="false"&gt;
      &lt;/td&gt;
   &lt;/tr&gt;
  </code></pre>
  
  <hr>
  
  <p>Sample image for clarification
  <a href="https://stackoverflow.com/questions/12442743/drop-down-select-to-change-a-second-drop-down-select-automatically"><img src="https://i.stack.imgur.com/hKOZ1.jpg" alt="An example of cascading table"></a></p>