PHP+jQuery循环绑定select的onchange事件操作对应类名元素

• 核心是JS循环的闭包变量污染：你用var声明的循环变量i，等触发select的change事件时，整个循环已经执行完毕，此时i的值固定为count+1，所有事件回调里的i都是这个错误值，自然找不到对应的.part{i}和.resone{i}元素
• 存在HTML规范问题：循环生成的input、select都用了重复的id值，DOM选择时会出现不可预期的错误
• 事件绑定逻辑冗余：不需要循环逐个绑定事件，用公共类绑定的方案更简洁高效

1. 调整PHP/HTML代码 #

优化重复ID问题，同时给元素加公共类简化后续选择：

<?php $count = 2; ?>
<div id="comments" hidden><?php echo htmlspecialchars($count); ?></div>
<?php for($i = 1; $i <= $count; $i++){ ?>
    <!-- 去掉重复id，添加公共类common-resone，同时存储对应序号到data属性 -->
    <input type="text" readonly="readonly" class="resone<?php echo $i; ?> common-resone" data-index="<?php echo $i; ?>">
    <!-- 去掉重复id，添加公共类common-part，存储对应序号到data属性，name也动态修改避免提交时重复 -->
    <select name="artist_<?php echo $i; ?>" class="part<?php echo $i; ?> common-part" data-index="<?php echo $i; ?>">
        <option value="" disabled selected>Select Category</option>
        <option value="1">medicine</option>
        <option value="2">shoes</option>
    </select>
<?php }?>

2. 调整jQuery代码 #

推荐用公共类绑定的方案，完全不需要循环，从根源避免闭包问题：

<script>
$(function() {
    // 直接给所有带common-part类的select绑定change事件
    $('.common-part').change(function() {
        // 获取当前触发事件的select的序号、选中值
        const index = $(this).data('index');
        const selectVal = $(this).val();
        // 赋值给对应序号的input
        $('.resone' + index).val(selectVal);
    })
})
</script>

如果你要保留原有的循环绑定逻辑，只需要把var i改成let i即可解决闭包问题，let是块级作用域，每次循环的i都是独立的：

<script>
$(function() {
    var count = document.getElementById("comments").textContent;
    // 把var改成let即可
    for (let i = 1; i <= count; i++) {  
        $('.part' + i).change(function() {
            // 这里也可以直接用$(this)代替类选择器，运行效率更高
            var display = $(this).val();
            $('.resone' + i).val(display);
        })
    }
})
</script>

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