How to disable and preselect an option from a select multiple

280 views Asked by At

I need to disable/hide if possible natively, or with js an option of a multiple type select but keep it selected. The example below only works if the Select is normal, but when I add the "multiple" attribute it doesn't work the way I want:

Select Normal (the expected result in multiple select):

<select>
  <option hidden>Default Hidden</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Select Multiple expected (but don't work):

<select multiple>
  <option hidden>Default Hidden</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

I tried using the "disabled" attribute in conjunction with the "selected" attribute as shown below, and it even "works", but the option value that is disabled is still sent on form submit (which was not supposed to happen).

I appreciate any help.

<select multiple>
  <option disabled selected>Default Hidden</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
0

There are 0 answers