动态表格Select框变更时获取隐藏输入框ID值的实现方案

我懂你的需求——在foreach生成的动态表格里，每一行的下拉选择框变动时，要获取对应行隐藏输入框里的表单ID对吧？首先得指出你现有代码里的一个关键问题：循环中给多个元素用了相同的id属性（比如id="hidden"和id="assigned_to"），这会导致页面出现重复ID的元素，JavaScript根本没法精准定位到对应行的元素哦。

下面是修改后的完整方案：

第一步：修正HTML代码（去掉重复ID，用Class关联） #

把循环里的id换成class，这样每一行的元素可以通过DOM层级关系关联起来：

@foreach($sCForms as $sCForm)
<tr>
    <td>{!! $sCForm->Description !!}</td>
    <!-- 用class代替id，标识这是行ID的隐藏输入框 -->
    <td style="display: none;">
        <input type="hidden" class="row-id" value="{{$sCForm->id}}">
    </td>
    <td class="demo">
        <!-- 同样用class代替id，标识这是分配用的下拉框 -->
        <select name="assigned_to" class="assigned-select form-control require">
            <!-- 这里放你的下拉选项，比如：
            <option value="">请选择</option>
            @foreach($users as $user)
                <option value="{{$user->id}}">{{$user->name}}</option>
            @endforeach
            -->
        </select>
    </td>
</tr>
@endforeach

第二步：编写JavaScript逻辑（获取对应行的ID） #

你可以用jQuery或者原生JS实现，两种方案都给你：

方案1：jQuery版本 #

// 用事件委托监听所有下拉框的change事件
$(document).on('change', '.assigned-select', function() {
    // 找到当前下拉框所在的<tr>父元素
    const currentRow = $(this).closest('tr');
    // 在当前行内查找隐藏的ID输入框，获取它的值
    const formId = currentRow.find('.row-id').val();
    
    // 这里可以添加你需要的业务逻辑，比如打印ID或者发送请求
    console.log('当前选择的行ID是：', formId);
});

方案2：原生JavaScript版本 #

// 给整个文档绑定change事件，通过事件委托处理下拉框变化
document.addEventListener('change', function(e) {
    // 判断触发事件的元素是否是我们的下拉框
    if (e.target.classList.contains('assigned-select')) {
        // 找到当前下拉框所在的<tr>元素
        const currentRow = e.target.closest('tr');
        // 在当前行内找到隐藏输入框
        const hiddenIdInput = currentRow.querySelector('.row-id');
        // 获取ID值
        const formId = hiddenIdInput.value;
        
        // 执行你的业务逻辑
        console.log('当前选择的行ID是：', formId);
    }
});

为什么这么做？ #

1. 避免重复ID：HTML页面里的id必须是唯一的，循环生成相同ID会导致JS选择器失效；用class则可以重复使用，适合批量元素的标识。
2. DOM层级定位：通过closest('tr')找到当前下拉框所在的行，再在该行内查找隐藏输入框，确保拿到的是对应行的ID，不会和其他行混淆。

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