根据动态选择下拉列表中选择的另一个SELECT删除SELECT选项

时间:2020-10-23 07:15:45

标签: reactjs

export_data()

我有一些这样的选择下拉列表。

const initData = [
   {
      "id":1,
      "name":"Type A",
      "description":"Description Type A"
   },
   {
      "id":2,
      "name":"Type B",
      "description":"Description Type B"
   },
   {
      "id":3,
      "name":"Type C",
      "description":"Description Type C"
   }
]
const [listOption, setListOption] =  useState(initData);
const arr = ['James', 'Paul', 'John', 'George', 'Ringo'];

const Check = (e, i) => {
    e.preventDefault();
      setListOption(
        initData.filter((entry) => entry.id !== parseInt(e.target.value))
      );
  };

我想要它,以便当用户在{arr.map(item => ( <select name="Type A" onChange={(e) => { Check(e); }} > {listOption && listOption.map((x) => { return ( <option value={x.id} key={"key" + x.id}> {x.name + item} </option> ); })} </select> ))} 选择下拉列表中选择"name":"Type A"时,在另一个“选择”下拉列表中,用户只能选择first"name":"Type B"

或者,如果用户在"name":"Type C""name":"Type B"的Select下拉列表中选择second,则在另一个Selects下拉列表中,用户只能选择third"name":"Type A"

我该怎么做?

1 个答案:

答案 0 :(得分:0)

最好有另一个数组,该数组可以保存所有选定的选项。因此,您将动态地更改该数组中的数据,并将比较具有选择的选项的第一个数组和保存已选择的选项的第二个数组,并在其他选择下拉列表中根据该比较给出特定的选项。

相关问题