如何利用jQuery来检测具有动态生成的ID的select标签上的更改以及更改select的选项

Question

我们已经在由Web框架（Rails 4.2.x）生成的用户“个人资料”页面上创建了两列HTML表，该表使用户能够动态地向表中添加行（通过单击“添加行”按钮）。 一切都按设计工作。 这两列由两个选择标记下拉列表“ user_name”和“ user_lunch”组成，其示例如下：

<table id="user-lunch-table">
<tr>
    <th>User</th>
    <th>Lunch</th>
</tr>
<tbody id='user-lunch-table-body'>
    <tr class='nested-fields'>
        <td><%= f.select :user_name, @user_names %></td>
        <td><%= f.select :user_lunch, @user_lunch1 %></td>
    </tr> 
</tbody> 

变量@user_names由[“ jim”，“ ted”]组成，变量@ user_lunch1由[“ chicken”，“ steak”，“ fish”]组成，变量@ user_lunch2由[“ salad”，“ tofu ”。

由于表的动态性质（用户可以随意添加行），因此框架会自动将特定于行的整数（从0开始）插入表中每个td的ID中。 例如，使用Firebug检查表时，分配给第一行“名称”列的ID是“ profile_attributes_0_user_name”，分配给下一行的同一列的ID是“ profile_attributes_1_user_name”，下一行是“ profile_attributes_2_user_name”，依此类推。

我们一直在研究如何利用jQuery来检测给定行中对“ user_name”选择标记（“名称”列）的更改，并在更改时更改下一列中用于选择的选项。 （“ user_lunch，“ Lunch”列）。在这种情况下，“ Lunch”列的选择选项设置为@ user_lunch1。当给定行中的user_name下拉列表从“ jim”更改为“ ted”时，我们希望该行的user_lunch列将选择选项从@ user_lunch1更改为@ user_lunch2。

给定动态ID分配后，第一个问题是使用jQuery检测user_name select标签的更改并标识发生更改的行。 正常情况下（如果td ID是静态的），我们将通过以下方式检测到更改（请注意，Rails 4.2默认为CoffeeScript格式；完全可以接受标准JS格式的解决方案）：

$(document.ready) ->
    $('#profile_attributes_0_user_name').change(-> 

但是，由于ID是动态的，因此我们需要能够使用通配符或正则表达式来确定更改。

因此，我们需要为同时包含“ profile_attributes_”和“ _user_name”的任何td ID检测一个.change（）。 然后，我们需要确定“ profile_attributes_”和“ _user_name”之间的值（0、1、2等）以标识该行。 最后，我们需要在同一行上更改相应的“ user_lunch”列，替换从@ user_lunch1到@ user_lunch2的选择选项。

预先感谢您的帮助。

Answer 1

用于在表中的各个元素上保留选项卡的方法（即使用id进行串联）是一种代码味道。 它引导您走上一条过于复杂的道路，这应该使您坐下来并质疑这个想法。

解决此问题的一种方法是简单地使用单元格的类名称导航到选择已更改的行中的相关单元格，然后在该单元格中获取选择。 例如：

<td class="user-name"><select...></td>
<td class="user-lunch"><select...></td>

如果.user-name单元中的选择被触发，则可以使用它来查找行，然后导航到.user-lunch中的选择：

$(".user-name select").on("change", function() {
    var $this = $(this),
        userLunch = $this.closest("tr").find(".user-lunch select");

    //Populate userLunch select here...
});

Answer 2

您可以通过以下方式获取元素：

$("[id^='profile_attributes_'][id$='_user_name']").change(...);

然后在您进行更改时， this元素将是已更改的元素，因此您可以导航并找到要更改的内容