Set <option> CSS display to none doesn't hide the selected option

Question

When I add display:none to an <option> tag with JavaScript after the page is ready, it wouldn't hide the default or the selected element, it stays on the hidden option unless I change that manually. The option 08:30 is hidden but it's still there as selected, but not an option. Here is the HTML and there's also a screenshot:

<div class="form-floating mb-3">
    <select class="form-select" id="time">
       <option value="08:30" style="display: none;">08:30</option>
       <option value="08:45">08:45</option>
    </select>
</div>

I've tried disabling the <option> tag as well but it does the same and keeps it selected. I need it to jump into an active select option or any other option but not the one I hide or disable.

Update: I have to use a workaround to get this working. First I've added all <option> tags to the <select> tag, then remove the ones that I don't want:

$('#time').html('
 <option value="08:30">08:30</option>
 <option value="08:45">08:45</option>
 <option value="09:00">09:00</option>
 <option value="09:15">09:15</option>
 <option value="09:30">09:30</option>
 <option value="09:45">09:45</option>
')
$('#time option[value="'09:00'"]').remove()

This works, although doesn't actually solve the issue (I guess that's a bug and hasn't been addressed yet). I would still appreciated an answer to improve the code.

Answer 1

Hello & Welcome Mohsen Salehi,

<option hidden>Hidden option</option>

It is not supported by IE < 11.

Please read more about it here How to hide a in a menu with CSS?

Edit:

You can also add disabled to prevent getting selected.

<div class="form-floating mb-3">
<select class="form-select" id="time">
   <option value="08:30" style="display: none;" disabled>08:30</option>
   <option value="08:45">08:45</option>
</select>
</div>