jquery - How do I make a singe $.getJSON call based on one select change -

i have several dynamically rendered tr tags contain select tags. want able update single select based upon select in same tr tag. what's happening when make select change in 1 tr tag, subsequently other selects updated in each tr tag. here example of code.

html:

 <tr>      <td>         <select>main</select>      </td>      <td>         <select>updated main</select>      </td>  </tr>  <tr>      <td>         <select>main</select>      </td>      <td>         <select>updated main</select>      </td>  </tr> 

jquery:

 var monitorprocodechange = function() { // monitor select code change $("select[name=prodcode]").change(function() {     $("tr").each(function() {         alert("change event fired");          var prodcode = $(this).find("select[name=prodcode]");         var product = $(this).find("select[name=product]");          $.getjson("/api/product/getproductbyid/" + prodcode.val(), function(data) {             product.append(                 $("<option/>").attr("value", data.id).text(data.productdescription));         });     }); }); }; 

i'm pretty sure has way i'm iterating through tr tags, can't figure out how make each row independent of 1 another.

you don't need .each() function

try way -

var monitorprocodechange = function () {     // monitor select code change     $("select[name=prodcode]").change(function () {         alert("change event fired");         var prodcode = $(this);         var product = $(this).closest('tr').find("select[name=product]");         $.getjson("/api/product/getproductbyid/" + prodcode.val(), function (data) {             product.append(             $("<option/>").attr("value", data.id).text(data.productdescription));         });      }); };