Hide first option in select [duplicate]

Question

I have options in a drop down which are generated dynamically. I want to hide first option as that is not needed. Is there any cross browser compatible method to achieve this. Any solution would be good whether using jquery or css.

Ahmar

Answer 1

$("#my-drop-down-select-element-id").find("option").eq(0).remove();

You can remove the first <option /> element in a <select /> element with the above code.

Using CSS to hide <option /> elements is problematic. See the link below for more on this.

To break-down the above function chain:

1. Select the <select /> element. (No pun intended)
2. Find <option /> elements within the previously selected element. I used find() because if there are option groups then children() won't work.
3. Filter down to only the first <option /> element.
4. Remove that element from the DOM.

This has definitely been asked before, for some more reading: How to hide a <option> in a <select> menu with CSS?