foreach循环中下拉框选中文本同步至文本框失效问题排查

嘿，这个问题我太熟了！核心原因就是你重复使用了相同的ID——HTML规范里明确要求ID在整个文档中必须是唯一的，当你用getElementById或者类似的选择器查找元素时，浏览器只会返回第一个匹配ID的元素，所以后面的下拉框变更时，还是只会操作第一个文本框，这就是为啥只有第一组能正常工作。

给你几个实用的解决方案，按需选就行：

方案1：给每个元素生成唯一ID #

利用foreach循环里的$key或者元素的唯一标识，给下拉框和文本框拼接出唯一ID，这样就能精准定位对应元素了：

@foreach ($showenMenus as $key => $element)
<div class="daily-col daily-col-200">
    <!-- 用$key生成唯一ID -->
    <select id="dropdown-{{ $key }}" class="menu-dropdown">
        <!-- 你的下拉选项内容 -->
    </select>
    <input type="text" id="textbox-{{ $key }}" class="menu-textbox">
</div>
@endforeach

然后在JS里绑定事件，通过ID的后缀关联对应的文本框：

// 给所有下拉框绑定change事件
document.querySelectorAll('.menu-dropdown').forEach(dropdown => {
    dropdown.addEventListener('change', function() {
        // 从ID里提取key，找到对应的文本框
        const key = this.id.split('-')[1];
        const targetTextbox = document.getElementById(`textbox-${key}`);
        targetTextbox.value = this.options[this.selectedIndex].text;
    });
});

方案2：用DOM关系关联（更健壮） #

不用依赖ID，直接通过元素的父容器来定位对应的文本框，这种方式不用管ID生成，代码更灵活：

@foreach ($showenMenus as $key => $element)
<div class="daily-col daily-col-200 menu-group">
    <select class="menu-dropdown">
        <!-- 你的下拉选项内容 -->
    </select>
    <input type="text" class="menu-textbox">
</div>
@endforeach

JS代码里利用DOM的层级关系找对应元素：

document.querySelectorAll('.menu-dropdown').forEach(dropdown => {
    dropdown.addEventListener('change', function() {
        // 找到当前下拉框的父容器，再在里面找文本框
        const targetTextbox = this.closest('.menu-group').querySelector('.menu-textbox');
        targetTextbox.value = this.options[this.selectedIndex].text;
    });
});

如果用jQuery的话，写法会更简洁：

$('.menu-dropdown').on('change', function() {
    $(this).closest('.menu-group').find('.menu-textbox').val($(this).find('option:selected').text());
});

关键总结 #

本质就是要避免重复ID，用类选择器或者DOM层级关系来关联对应的文本框和下拉框，这样每一组元素都能独立触发同步逻辑啦。

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