Hiding option in dropdown

Question

I'm trying to selectively hide options in a dropdown list using the 'hidden' attribute. Please take a look at jsfiddle in which I hide the 'quietest' option.

$('#quietest').prop('hidden', 'hidden');

When clicking the arrows on the dropdown list the 'quietest' option is successfully hidden (only 'fastest' and 'balanced' are listed), however, the user can still select the 'quietest' option by using the keyboard. Is that expected behavior for the 'hidden' attribute? How to properly hide so it's no longer selectable? It needs to be easy to unhide the option as well (so preferably no removing of the option).

Answer 1

You can try like this:

Fiddle - hiding with hidden property

$('#quietest').prop('disabled', true).prop('hidden', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dptcentres_edit">
    <option value="fastest">Fastest</option>
    <option selected="true" value="balanced">Balanced</option>
    <option id='quietest' value="quietest">Quietest</option>
</select>

EDIT

Due to @billyonecan's comment, I replaced the hiding method, instead of using the hidden property, I use the CSS display attribute and set it to none in order to hide the element. As he correctly states, the hidden property isn't supported by all browsers.

Fiddle - Hiding with CSS display attribute

$('#quietest').prop('disabled', true).css('display', 'none');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dptcentres_edit">
    <option value="fastest">Fastest</option>
    <option selected="true" value="balanced">Balanced</option>
    <option id='quietest' value="quietest">Quietest</option>
</select>