根据React中另一个下拉列表中选择的值更改下拉列表中的值

import React, { useState } from 'react';

const DropdownExample = () => {
  const [selectedOption, setSelectedOption] = useState('');
  const [options, setOptions] = useState([]);

  // 根据另一个下拉列表的选择值更新第二个下拉列表的选项
  const handleDropdownChange = (event) => {
    const selectedValue = event.target.value;
    setSelectedOption(selectedValue);

    // 根据选择的值更新第二个下拉列表的选项
    if (selectedValue === 'option1') {
      setOptions(['option1-1', 'option1-2', 'option1-3']);
    } else if (selectedValue === 'option2') {
      setOptions(['option2-1', 'option2-2', 'option2-3']);
    } else if (selectedValue === 'option3') {
      setOptions(['option3-1', 'option3-2', 'option3-3']);
    }
  };

  return (
    <div>
      <label htmlFor="dropdown1">下拉列表1：</label>
      <select id="dropdown1" value={selectedOption} onChange={handleDropdownChange}>
        <option value="">请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
      </select>

      <label htmlFor="dropdown2">下拉列表2：</label>
      <select id="dropdown2">
        {options.map((option) => (
          <option key={option} value={option}>{option}</option>
        ))}
      </select>
    </div>
  );
};

export default DropdownExample;

import React from 'react';
import ReactDOM from 'react-dom';
import DropdownExample from './DropdownExample';

ReactDOM.render(<DropdownExample />, document.getElementById('root'));