简体   繁体   English

仅选择已更改的下拉菜单

[英]Select only drop-down menu that has changed

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. 问题在于,当我使用以下语法进行选择时,表的每一行都包含相同的下拉菜单,并且在更改时,JQuery会选择所有下拉菜单,而不仅仅是实际更改的下拉菜单。 Below solution uses event.stopImmediatePropagation() to act similar to a break point and is the only solution I can think of that will work. 下面的解决方案使用event.stopImmediatePropagation()来执行类似于断点的操作,这是我能想到的唯一可行的解​​决方案。 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;
    });

First off, id's need to be unique. 首先,ID必须是唯一的。 A class would be better suited for this purpose. 一个班级将更适合于此目的。

$('.selected_client').change(function(){
   $(this).val(); // <-- value of the drop down that was currently changed
}); 

May be you could differentiate the element IDs for each row, example: the first select element would have an id of "selected_client_id01", the second one "selected_client_id02" and so forth. 可能是您可以区分每一行的元素ID,例如:第一个选择元素的ID为“ selected_client_id01”,第二个元素的ID为“ selected_client_id02”,依此类推。 And then only assign functions to all elements with that one class "selected_client". 然后仅将功能分配给具有该类“ selected_client”的所有元素。

using event.stopImmediatePropagation(); 使用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. 证明成功,并且只是作为中断,对于处理动态实体(按ID选择不能完全解决问题)的情况非常有用。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM