如何实现双multiple select选项双向迁移？代码修复求助

你的代码存在几个关键问题导致功能失效：

• 点击「Add」按钮时，仅处理了单个选中项（framework.value只能获取第一个选中值），且使用了未定义的selected变量，多选场景下会报错且无法正确移除选项
• 点击「Remove」按钮时，只删除了第二个菜单的选中项，但未将这些选项移回第一个菜单

修正后的代码 #

HTML（无需修改，保持原代码即可）

<div id="container">
  <form>
    <label for="framework">Framework:</label>
    <select id="framework" name="framework" multiple>
      <option value="1A">1A</option>
      <option value="1B">1B</option>
      <option value="1C">1C</option>
      <option value="2A">2A</option>
      <option value="2B">2B</option>
      <option value="2C">2C</option>
      <option value="3A">3A</option>
      <option value="3B">3B</option>
      <option value="3C">3C</option>
      <option value="3D">3D</option>
    </select>

    <button id="btnAdd">Add</button>

    <label for="list">Framework List:</label>
    <select id="list" name="list" multiple>

    </select>
    <button id="btnRemove">Remove Selected Framework</button>
  </form>
</div>

修正后的JavaScript代码

const btnAdd    = document.querySelector('#btnAdd');
const btnRemove = document.querySelector('#btnRemove');
const listbox   = document.querySelector('#list');
const framework = document.querySelector('#framework');

btnAdd.onclick = (e) => {
  e.preventDefault();

  // 获取第一个菜单中所有选中的选项
  const selectedOptions = Array.from(framework.selectedOptions);
  
  if (selectedOptions.length === 0) {
    alert('请至少选择一项');
    return;
  }

  // 遍历选中项，添加到第二个菜单并从第一个移除
  selectedOptions.forEach(option => {
    listbox.add(option.cloneNode(true)); // 克隆选项添加到目标菜单
    framework.remove(option.index); // 从原菜单移除对应选项
  });

  framework.focus();
};

btnRemove.onclick = (e) => {
  e.preventDefault();

  // 获取第二个菜单中所有选中的选项
  const selectedOptions = Array.from(listbox.selectedOptions);
  
  if (selectedOptions.length === 0) {
    alert('请至少选择一项');
    return;
  }

  // 遍历选中项，移回第一个菜单并从第二个移除
  selectedOptions.forEach(option => {
    framework.add(option.cloneNode(true));
    listbox.remove(option.index);
  });

  listbox.focus();
};

关键修改说明 #

• 使用selectedOptions属性直接获取所有选中的选项，原生API支持多选场景，比手动判断更可靠
• 通过cloneNode(true)克隆选项，确保添加到目标菜单的是完整的选项节点
• 补充了Remove按钮的回移逻辑，让选中选项能正确回到第一个菜单
• 移除了冗余的framework.value = ''，因为移除选项后原菜单的选中状态会自动清除
• 优化了提示文本为中文，更贴合使用场景

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