acctman acctman - 1 year ago 85
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 Source

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