两组多选框联动异常：仅其中一组可正常工作的问题排查

Hey there! Let's break down why only one of your select pairs is working, and how to fix it.

The Root Cause #

You've assigned window.onload twice in your code. When you do this, the second function replaces the first one entirely. That means the initialization code for your sel1/sel2 pair never runs—sel1 never gets populated with options, and its onchange event never gets bound. No wonder that group doesn't work!

The Fix #

Merge both initialization blocks into a single window.onload function. This way, both select groups get properly set up. I've also cleaned up some variable naming inconsistencies and added small optimizations to make the code cleaner.

Corrected Full Code #

HTML

<select multiple="multiple" size="11" id="sel1"></select>
<select id="sel2" multiple="multiple" size="11"></select>
<select multiple="multiple" size="11" id="sel11"></select>
<select id="sel22" multiple="multiple" size="11"></select>

JavaScript

// First group: Department -> Names
var selOptions = [ 
  ['Department 1', 'Name 1', 'Name 2', 'Name 3'], 
  ['Department 2', 'Name 2', 'Name 4', 'Name 5'], 
  ['Department 3', 'Name 1', 'Name 4', 'Name 6'] 
];

// Second group: Device Category -> Devices
var selOptions2 = [ 
  ['Desktop','Desktop'], 
  ['Other','Other'], 
  ['Phone','iPhone','iPod'], 
  ['Tablet','ipad','Amazon Kindle'], 
  ['TV','Other','Apple TV'] 
];

// Update sel2 based on sel1's selected options
function setSel2Options(obj) {
  const oSel2 = document.getElementById('sel2');
  oSel2.options.length = 0;
  if (obj.selectedIndex === 0) return;

  for (let k = 0; k < obj.options.length; k++) {
    if (obj.options[k].selected) {
      for (let i = 0; i < selOptions.length; i++) {
        if (obj.options[k].value === selOptions[i][0]) {
          for (let j = 1; j < selOptions[i].length; j++) {
            oSel2.options[oSel2.options.length] = new Option(selOptions[i][j], selOptions[i][j], false, false);
          }
          break; // Stop searching once we find the matching department
        }
      }
    }
  }
}

// Update sel22 based on sel11's selected options
function setSel22Options(obj) {
  const oSel22 = document.getElementById('sel22');
  oSel22.options.length = 0;
  if (obj.selectedIndex === 0) return;

  for (let k = 0; k < obj.options.length; k++) {
    if (obj.options[k].selected) {
      for (let i = 0; i < selOptions2.length; i++) {
        if (obj.options[k].value === selOptions2[i][0]) {
          for (let j = 1; j < selOptions2[i].length; j++) {
            oSel22.options[oSel22.options.length] = new Option(selOptions2[i][j], selOptions2[i][j], false, false);
          }
          break; // Stop searching once we find the matching category
        }
      }
    }
  }
}

// Initialize both select groups in a single onload function
window.onload = function() {
  // Set up first group (sel1/sel2)
  const oSel1 = document.getElementById('sel1');
  oSel1.options[oSel1.options.length] = new Option('Select a department', '', false, false);
  for (let i = 0; i < selOptions.length; i++) {
    oSel1.options[oSel1.options.length] = new Option(selOptions[i][0], selOptions[i][0], false, false);
  }
  oSel1.onchange = function() {
    setSel2Options(this);
  };

  // Set up second group (sel11/sel22)
  const oSel11 = document.getElementById('sel11');
  oSel11.options[oSel11.options.length] = new Option('Select a category', '', false, false);
  for (let i = 0; i < selOptions2.length; i++) {
    oSel11.options[oSel11.options.length] = new Option(selOptions2[i][0], selOptions2[i][0], false, false);
  }
  oSel11.onchange = function() {
    setSel22Options(this);
  };
};

Extra Optimizations I Added #

• No More Global Variables: Moved select element references inside functions/initialization to avoid scope clutter.
• Consistent Naming: Renamed messy function names like setsel22Optionss to match the cleaner setSel2Options style.
• Early Loop Exits: Added break statements to stop searching once a matching option group is found, saving unnecessary iterations.
• Modern Scoping: Replaced var with let/const for better block-level scoping.

内容的提问来源于stack exchange，提问作者A.R