jQuery无法识别带行ID的minAgeUpdate字段问题求助

我正在开发一个脚本，数据库会输出多行数据，其中minAge字段对应一个select下拉框。用户更改年龄后需要更新数据库同步新值。原jQuery代码获取minAgeUpdate字段值时，第一行正常，但后续行始终读取第一行的值。我已将字段改为minAgeUpdate{rowid}，但不知道如何让jQuery识别该带ID的字段以找到对应的下拉框。

原jQuery代码：

$(document).on('blur', '.minAge', function(){  
    var id = $(this).data("id6");  
    var userID = $(this).data("id5");  
    var minAge = $("#minAgeUpdate option:selected").val(); 
    edit_data(id, userID, minAge, "minAge");  
});  

HTML表格输出代码：

<tr data-sort-id="<?=$row[" id "]?>" class="emailsSent">
    <td class="emailsSent"><?=$row["positionNo"]?></td>
    <td class="name" data-id1="<?=$userID?>" data-id2="<?=$row[" id "]?>" contenteditable><?=$row["name"]?></td>
    <td class="time" data-id4="<?=$userID?>" data-id2="<?=$row[" id "]?>" contenteditable><?=$row["time"]?></td>
    <td class="instructions" data-id3="<?=$userID?>" data-id4="<?=$row[" id "]?>" contenteditable><?=$row["instructions"]?></td>
    <td class="equipment" data-id5="<?=$userID?>" data-id6="<?=$row[" id "]?>" contenteditable><?=$row["equipment"]?></td>
    <td class="w3w" data-id5="<?=$userID?>" data-id6="<?=$row[" id "]?>" contenteditable><?=$row["w3w"]?></td>
    <td class="minAge" data-id5="<?=$userID?>" data-id6="<?=$row[" id "]?>">
        <select name="minAgeUpdate<?=$row[" id "]?>" id="minAgeUpdate<?=$row[" id "]?>">
            <option vale="<?=$row[" minAge "]?>"><?=$row["minAge"]?></option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
        </select>
    </td>
    <td class="emailsSent">
        <button type="button" name="delete_btn" data-id2="<?=$userID?>" data-id3="<?=$row[" id "]?>" class="btn btn-xs btn-red btn_delete">x</button>
    </td>
</tr>

问题核心是你用了固定选择器$("#minAgeUpdate")，jQuery只会匹配第一个符合条件的元素，导致后续行都读取第一行的值。以下两种方法可以解决：

方法一：利用当前元素上下文查找 #

因为select就在触发事件的.minAge单元格内部，直接在当前元素范围内查找select即可，无需拼接ID：

$(document).on('blur', '.minAge', function(){  
    var id = $(this).data("id6");  
    var userID = $(this).data("id5");  
    // 直接在当前td下定位select并获取选中值
    var minAge = $(this).find("select").val(); 
    edit_data(id, userID, minAge, "minAge");  
});  

方法二：拼接动态ID选择器 #

如果一定要通过ID定位，就用获取到的id拼接成完整的选择器：

$(document).on('blur', '.minAge', function(){  
    var id = $(this).data("id6");  
    var userID = $(this).data("id5");  
    // 用row id拼接出对应的select ID
    var minAge = $("#minAgeUpdate" + id).val(); 
    edit_data(id, userID, minAge, "minAge");  
});  

另外注意HTML中的小错误：<option vale="<?=$row[" minAge "]?>">里的vale应该改为value，否则初始选中值可能无法正常生效。

内容的提问来源于stack exchange，提问作者JASH