如何利用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元素將是已更改的元素，因此您可以導航並找到要更改的內容