Geek Answers Handbook

Hide in dropdown menu

I am trying to selectively hide options in a dropdown using the 'hidden' attribute. Please see jsfiddle , in which I hide the “quietest” option.

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

When you click the arrows in the drop-down list, the option “quietest” is successfully hidden (only “fastest” and “balanced” are displayed), however, the user can still choose the “quietest” option using the keyboard. Is this the expected behavior for a "hidden" attribute? How to hide it so that it is no longer chosen? It is also necessary to easily display this option (therefore it is preferable not to delete the option).

+4
source share
3 answers

:

Fiddle - hidden

$('#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>
Hide result

- @billyonecan , hidden CSS display none, . , hidden .

Fiddle - CSS display

$('#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>
Hide result
+3

, disabled,

$('#quietest').prop('disabled', true).hide();
+3

hide. option, .

$('#quietest').hide().prop('disable', true);

DEMO

0

More articles:


All Articles