acctman acctman - 4 months ago 16
HTML Question

Selectbox hide first option entry on dropdown?

Is it possible to hide the first option i.e.

<option>Select One</option>
when the user clicks the dropdown box to see the options. So the text Select One does not appear in the list

Answer

As there is no reliable cross browser way to hide option elements, your best bet is to remove it on focus and add it again on blur:

jQuery(document).ready(function () {
    var first = jQuery('#myselect').find('option').first();
    jQuery('#myselect').on('focus', function (e) {
        first.remove();
    }).on('blur', function (e) {
        jQuery(this).find('option').first().before(first);
    });
});

Here's a working example

Comments