Search code examples
reactjsmaterial-uiuitextfield

How to disable other options after if an option is selected in MUI Select?

Is it possible to change the select options of the Select based on other selects values?

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

Visual example:

So I have this 2 options

enter image description here

and when I select David I only want to show up till 6 and not 7,8,9,10 etc

enter image description here

enter image description here

and then if you select the other one then show everything

The options:

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"}]

The 2 textfields I'm using:

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

  • You need to store the list of options of the second Select in a state. Then when you select an option in the first one, update the state based on the selected value:

    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>

    Live Demo

    Codesandbox Demo