Remove option value from the select option

Question

My code is:

<select>
<option>Options</option>
<option>Settings</option>
</select>

"Options" value is the default value in my list. If we view the list "options" value is not need to display. It is possible?? Any one can answer this question. Please see the image.

Answer 1

You can do this with just CSS

Just set display:none on that option

FIDDLE

<select>
    <option style='display: none;'>Options</option>
    <option>Settings 1</option>
    <option>Settings 2</option>
    <option>Settings 3</option>
</select>

The reason WHY this works is because the option which is displayed within the select box isn't the actual option element itself, it's just a copy of the selected option.

(Hint: look at the the image which the OP posted)

Now by default, the first option is the selected one - so it is displayed in the select box, however when you open the select box - you don't see it as an option - because it has display:none. Similarly, if you select an option - you'll won't see the first one anymore - because there's no way to select it.

Answer 2

Use :contains selector in jquery

$("select option:contains(Options)").remove();

Fiddle

Answer 3

May be you want something like this:

$('select').on('change click focus', function () {
    $('option:first', this).hide();
}).on('blur', function () {
    $('option:first', this).show();
});

Fiddle

Answer 4

You can hide it by default:

$('select option:eq(0)').hide();

Fiddle Demo

or using pure CSS:

select option:first-child {
    display: none;
}

Fiddle Demo