Javascript 如何利用jQuery检测带有动态生成ID的select标记上的更改，以及select的alter选项

我们在由web框架（Rails 4.2.x）生成的用户“配置文件”页面上创建了一个两列HTML表，允许用户动态地向表中添加行（通过单击“添加行”按钮）。一切都按计划进行。这两列由两个选择标签下拉列表组成，“用户名称”和“用户午餐”，示例如下：

<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> 

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

因此，我们需要为同时包含“profile\u attributes\u”和“\u user\u name”的任何td ID检测.change（）。然后，我们需要确定“profile\u attributes”和“\u user\u name”之间的值（0、1、2等）来标识行。最后，我们需要在同一行上修改相应的“user\u午餐”列，将select from@user\u午餐1的选项替换为@user\u午餐2

---

提前感谢您的帮助

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

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

---

然后在您的更改中，

此

元素将是已更改的元素，因此您可以导航并找到要更改的内容

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

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

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

---

这是否与

活动授权相关

？感谢您的回复。明确地说，我们正在使用的框架是以这种方式自动生成td ID的，我不确定如果不重建整个站点架构，它是否在我们的控制范围内，由于时间敏感性，这在这个特定项目上可能是可能的，也可能是不可能的。好吧，你可以做一个可行性研究，为了长期利益，看看是否值得改变。但是，要按原样处理代码，请查看jQuery属性选择器：。这在另一份答复中提出，但没有解释。这些应该对您有所帮助，并可能避免正则表达式的复杂性。

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

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

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