基于onchange与getElementById的下拉联动循环逻辑失效问题

问题背景 #

需要实现以下联动规则：

• 当第2-355行的任意下拉框（ID格式为QR~QID7~xN）有选中值时，禁用顶部的QR~QID7~2下拉框
• 当顶部下拉框有选中值时，禁用所有行下拉框

当前代码的问题在于遍历行下拉框时，最后一个未选中的下拉框会覆盖之前的判断结果，导致只要存在一个未选中的行下拉框，顶部下拉框就会被错误启用，无法正确触发联动逻辑。

修正后的代码 #

// 顶部下拉框的change事件
jQuery("#QR~QID7~2").change(function() {
  const hasValue = $(this).val() !== "";
  // 一次性选中所有行下拉框，设置disabled状态
  jQuery("[id^='QR~QID7~x']").prop('disabled', hasValue);
});

// 所有行下拉框的change事件
jQuery("[id^='QR~QID7~x']").change(function() {
  // 检查是否有任意行下拉框有选中值
  const anyRowHasValue = jQuery("[id^='QR~QID7~x']").filter(function() {
    return $(this).val() !== "";
  }).length > 0;
  // 设置顶部下拉框的disabled状态
  jQuery("#QR~QID7~2").prop('disabled', anyRowHasValue);
});

// 页面加载时初始化状态（可选，避免初始状态不符合逻辑）
jQuery(document).ready(function() {
  const anyRowHasValue = jQuery("[id^='QR~QID7~x']").filter(function() {
    return $(this).val() !== "";
  }).length > 0;
  jQuery("#QR~QID7~2").prop('disabled', anyRowHasValue);
  
  const topHasValue = jQuery("#QR~QID7~2").val() !== "";
  jQuery("[id^='QR~QID7~x']").prop('disabled', topHasValue);
});

关键修改点 #

1. 简化元素选择：使用[id^='QR~QID7~x']属性选择器，一次性匹配所有行下拉框，无需循环拼接ID，提升效率和可读性。
2. 事件类型优化：将行下拉框的click事件改为change事件，更贴合下拉框选中值变化的触发场景，避免不必要的事件触发。
3. 正确的状态判断：通过filter方法筛选出有选中值的行下拉框，只要存在至少一个，就禁用顶部下拉框，解决了原代码中判断被覆盖的问题。
4. 初始化状态处理：添加页面加载时的状态初始化，确保页面刚打开时就符合联动规则，避免初始状态混乱。

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