如何移除select元素中的旧选项？解决动态追加重复选项问题

你现在的代码存在两个问题：一是切换选中值时没清空旧选项，导致选项不断追加；二是还有几处语法错误（比如onChange里传的是事件对象而非目标值，sections是字符串数组却错误访问sectionName属性）。下面给你两种可行的解决思路：

推荐方案：React数据驱动渲染（最佳实践） #

React是数据驱动视图的框架，直接操作DOM并非最优写法。我们可以通过状态控制下拉框的选项内容，切换时自动更新视图，从根源避免重复追加问题。

修正后的代码：

import { useState } from 'react';

function App() {
  const sections = ["Section 1", "Section 2"];
  const sections2 = ["Section 3", "Section 4"];
  const [selectedValue, setValue] = useState("");

  // 根据选中值动态确定要显示的选项列表
  const currentSections = selectedValue === "1" ? sections : sections2;

  return (
    <form>
      <select onChange={e => setValue(e.target.value)}>
        <option value="1">Section List 1</option>
        <option value="2">Section List 2</option>
      </select>
      <select id="section">
        {/* 直接通过map渲染选项，React自动处理新旧DOM替换 */}
        {currentSections.map(section => (
          <option key={section} value={section}>
            {section}
          </option>
        ))}
      </select>
    </form>
  );
}

export default App;

核心逻辑是用currentSections动态匹配选中值对应的选项列表，React会自动对比新旧DOM节点，更新时直接替换旧选项，不会出现追加问题。同时修正了onChange的取值错误，给每个选项添加了唯一key（React列表渲染的必填项）。

备选方案：操作DOM前清空旧选项 #

如果你一定要保留直接操作DOM的方式，那每次添加新选项前，必须先清空下拉框内的旧选项。可以通过innerHTML = ''或循环移除子元素实现：

修正后的代码：

import { useState, useEffect } from 'react';

function App() {
  const sections = ["Section 1", "Section 2"];
  const sections2 = ["Section 3", "Section 4"];
  const [selectedValue, setValue] = useState("");

  // 用useEffect监听选中值变化，避免每次render都执行DOM操作
  useEffect(() => {
    const selectElement = document.getElementById("section") as HTMLSelectElement;
    if (!selectElement) return;

    // 清空所有旧选项
    selectElement.innerHTML = '';

    const targetSections = selectedValue === "1" ? sections : sections2;
    targetSections.forEach(section => {
      const optionElement = document.createElement("option");
      optionElement.value = section;
      optionElement.text = section;
      selectElement.add(optionElement);
    });
  }, [selectedValue]); // 仅当选中值变化时执行

  return (
    <form>
      <select onChange={e => setValue(e.target.value)}>
        <option value="1">Section List 1</option>
        <option value="2">Section List 2</option>
      </select>
      <select id="section"></select>
    </form>
  );
}

export default App;

这里用useEffect监听selectedValue的变化，每次值改变时先清空下拉框，再添加新选项，同时把DOM操作放在effect中，避免组件每次渲染都重复执行，提升性能。

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