Question

I have a table that includes a column for the user to select from a drop-down menu to populate the next column. Problem is the table contains the same drop-down menu for each row and on change when I select using the following syntax JQuery selects all drop-downs instead of just the one in that has actually changed. Below solution uses event.stopImmediatePropagation() to act similar to a break point and is the only solution I can think of that will work. Please let me know if there is a more elegant solution out there…

<table>
  <tr>
    <td>
      <select name="selected_client[id]" id="selected_client_id" class="selected_client">
        <option value=""></option>
        <option value="240">CLIENT ONE</option>
        <option value="195">CLIENT TWO</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select name="selected_client[id]" id="selected_client_id" class="selected_client">
        <option value=""></option>
        <option value="240">CLIENT ONE</option>
        <option value="195">CLIENT TWO</option>
      </select>
    </td>
  </tr>
</table>

$j('.selected_client').change(function(event) {
        var client_id = $j(this).val(); // <-- value of the drop down that was currently changed
        var tmp_row = $j(this).parent('td').parent('tr');
        // perform action

        event.stopImmediatePropagation();  // prevents calling other matched rows
        return false;
    });

Answer 1

using event.stopImmediatePropagation(); proved successfully and simply acts as a break which is useful for the scenario when you are dealing with dynamic entities where selecting by id does not quite solve the problem.