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

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

视觉示例：

所以我有这两个选项

当我选择大卫时，我只想显示到 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"}]

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

              <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>

现场演示