如何在JavaScript函数中循环处理两组ID键值对

我是JavaScript新手，拥有两组ID键值对：

myselect->myoption
myselect2->myoption2

现有如下代码：

function checkboxStatusChanges() {
  var multiselect = document.getElementById("myselect");
  var multiselectOption = multiselect.getElementsByTagName('option')[0];

  var values = [];
  var checkboxes = document.getElementById("myoption");
  var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

  for (const item of checkedCheckboxes) {
    var checkboxValue = item.getAttribute('value');
    values.push(checkboxValue);
  }

  var dropdownValue = "Nothing is selected";
  if (values.length > 0) {
    dropdownValue = values.join(', ');
  }

  multiselectOption.innerText = dropdownValue;
}

当前代码仅使用了第一组ID键值对myselect->myoption，需要在函数内部编写循环，使两组ID键值对都能被处理。

解决方案 #

你可以把两组ID的映射关系做成一个数组，然后循环遍历这个数组，复用原来的单组处理逻辑即可：

function checkboxStatusChanges() {
  // 定义所有需要处理的ID映射组
  const idPairs = [
    { selectId: 'myselect', checkboxContainerId: 'myoption' },
    { selectId: 'myselect2', checkboxContainerId: 'myoption2' }
  ];

  // 循环处理每一组
  for (const pair of idPairs) {
    // 获取当前组的下拉框和对应选项
    const multiselect = document.getElementById(pair.selectId);
    const multiselectOption = multiselect.getElementsByTagName('option')[0];

    // 获取当前组的选中复选框值
    const values = [];
    const checkboxes = document.getElementById(pair.checkboxContainerId);
    const checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

    for (const item of checkedCheckboxes) {
      const checkboxValue = item.getAttribute('value');
      values.push(checkboxValue);
    }

    // 更新下拉框文本
    let dropdownValue = "Nothing is selected";
    if (values.length > 0) {
      dropdownValue = values.join(', ');
    }
    multiselectOption.innerText = dropdownValue;
  }
}

说明 #

• 用数组idPairs存储所有ID映射关系，后续如果要新增处理组，直接在数组里添加新的对象即可
• 通过for...of循环遍历每一组，把原来的单组逻辑套入循环，替换成当前组的ID
• 将变量声明从var改为const/let，这是更规范的现代JavaScript写法，能避免变量提升带来的潜在问题

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