React动态添加下拉框：实现选项不重复且保留已选值

你当前的问题根源是直接修改了全局的optionList，导致所有下拉框的选项池都被过滤掉了已选值——包括当前下拉框自己的选中项，所以选项会消失。正确的做法是分开维护原始选项和各下拉框的选中状态，每个下拉框的可选项要排除其他下拉框的已选值，同时保留自己当前的选中值。

核心思路 #

1. 保留一份不可修改的原始选项列表，作为所有下拉框的选项数据源
2. 维护一个selectedValues数组，存储每个动态生成的下拉框的选中值（索引和动态生成的下拉框列表对应）
3. 每个下拉框的可选项 = 原始选项列表过滤掉「其他下拉框已选中的值」，再加上自身当前的选中值（如果已选）

完整代码示例 #

假设你用的是React，调整后的代码如下：

import { useState } from 'react';

function YourComponent() {
  // 原始选项列表，固定不修改
  const originalOptions = [1, 2, 3, 4];
  // 动态生成的下拉框实例列表（通过添加按钮新增项）
  const [mainForm, setMainForm] = useState([{ id: 1 }]);
  // 存储每个下拉框的选中值，索引和mainForm的项一一对应
  const [selectedValues, setSelectedValues] = useState([]);

  // 添加下拉框的方法
  const addSelect = () => {
    setMainForm(prev => [...prev, { id: Date.now() }]);
    // 初始化新下拉框的选中值为undefined
    setSelectedValues(prev => [...prev, undefined]);
  };

  // 处理下拉框选择事件
  const handleSelect = (index, value) => {
    // 更新对应索引的选中值
    const newSelectedValues = [...selectedValues];
    newSelectedValues[index] = value;
    setSelectedValues(newSelectedValues);
  };

  return (
    <div>
      <button onClick={addSelect}>添加下拉框</button>
      {mainForm.map((element, index) => (
        <div key={element.id}>
          <select 
            value={selectedValues[index] || ''}
            onChange={(e) => handleSelect(index, e.target.value)}
          >
            {/* 空选项，可选 */}
            <option value="">请选择</option>
            {/* 生成当前下拉框的可选项：排除其他已选值，保留自身已选值 */}
            {originalOptions.map(option => {
              // 其他下拉框已选的值，要排除
              const isSelectedByOthers = selectedValues.some((val, i) => i !== index && val === option.toString());
              // 自身已选的值，要保留
              const isSelfSelected = selectedValues[index] === option.toString();
              if (!isSelectedByOthers || isSelfSelected) {
                return <option key={option} value={option}>{option}</option>;
              }
              return null;
            })}
          </select>
        </div>
      ))}
    </div>
  );
}

关键细节说明 #

• originalOptions固定不变，作为所有选项的基础数据源
• selectedValues数组和mainForm一一对应，精准记录每个下拉框的选中状态
• 渲染每个下拉框的选项时，只排除其他下拉框已选的值，自身已选的值依然保留在选项中，不会消失
• 点击添加按钮时，同步更新mainForm和selectedValues，保证索引对应关系

你原有代码的小问题修复 #

你原来的代码存在几个拼写和语法错误：

• </selct>应该是</select>
• optionList.map里的{item}应该是element（循环变量定义的是element）
• handleSelect里的filter缺少闭合括号，且直接修改optionList（React中必须通过状态更新，不能直接赋值）

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