如果在MUI选择中选择了某个选项，如何禁用其他选项？

Question

是否可以根据其他选择值更改Select的选择选项？

so for example:
if I have lets say A and B
if you select A
then you can select in the other textfield C and D
but if you selected B 
then you can select E and F

可视化示例：

所以我有两个选择

​

​

当我选择David时，我只想显示到6点，而不是7,8,9,10等等

​

​

​

​

然后，如果您选择另一个，则会显示所有内容

选项：

const grados = 
      [{value: "Prekínder-3", label: "Prekínder-3"},
       {value: "Prekínder", label: "Prekínder"},
       {value: "Kínder", label: "Kínder"},
       {value: "1° Grado", label: "1° Grado"},
       {value: "2° Grado", label: "2° Grado"},
       {value: "3° Grado", label: "3° Grado"},
       {value: "4° Grado", label: "4° Grado"},
       {value: "5° Grado", label: "5° Grado"},
       {value: "6° Grado", label: "6° Grado"},
       {value: "7° Grado", label: "7° Grado"},
       {value: "8° Grado", label: "8° Grado"},
       {value: "9° Grado", label: "9° Grado"},
       {value: "10° Grado", label: "10° Grado"},
       {value: "11° Grado", label: "11° Grado"},
       {value: "12° Grado", label: "12° Grado"}]

       const sedes = 
       [{value: "Academia Internacional Boquete", label: "Academia Internacional Boquete"},
        {value: "Academia Internacional David", label: "Academia Internacional David"}]

我正在使用的两个文本字段：

              <TextField 
               select
               margin="normal"
               value={colegio}
               helperText="Seleccione la sede"
               onChange={handleChangeColegio}
               >
                   {sedes.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
          </TextField>

          <TextField 
               select
               margin="normal"
               value={grado}
               helperText="Seleccione el grado"
               onChange={handleChangeGrado}
               >
                   {grados.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
          </TextField>

Answer 1

您需要将第二个Select的选项列表存储在一个状态中。然后，当您在第一个选项中选择一个选项时，根据选定的值更新状态：

const [options2, setOptions2] = useState(allOptions2);

const handleChangeOption1 = (event) => {
  const selectedValue = event.target.value;

  if (selectedValue === options1[0].value) {
    setOptions2(allOptions2.slice(0, 9)); // get the first 9 items
  } else {
    setOptions2(allOptions2.slice(-6)); // get the last 6 items
  }
  setOption1(selectedValue);
};

<TextField
  select
  onChange={handleChangeOption1}
>
  {options1.map((option) => (...))}
</TextField>

<TextField select>
  {options2.map((option) => (...))}
</TextField>

实时演示

​

​