Hide first option in select

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

do you have any code ? Provide a clear explanation of what you want to achieve — dawez, Nov 06 '14 at 17:29
what exactly do you mean by first option? please add a code snippet — Sai, Nov 06 '14 at 17:29
Not sure about your question but maybe what you are looking for: http://stackoverflow.com/a/8442831/1414562 — A. Wolff, Nov 06 '14 at 17:38
OK guys, if you're gonna vote to close something, choose a reason that makes sense. The question is fairly clearly stated and is on topic for this site. Code SHOULD DEFINITELY be shown though. — Jasper, Nov 06 '14 at 17:38
@Jasper IMHO, it is unclear what it is asked because why OP would add an option to then remove it? `drop down which are generated dynamically` — A. Wolff, Nov 06 '14 at 17:39
@A.Wolff "Hide first option in select" -- really? That reads clearly to me. — Jasper, Nov 06 '14 at 17:40
@Jasper generated dynamically, ok but HOW then? Why to add it then? I could be completly wrong, maybe question makes sense but not imho. BTW, does this option must or not be default SELECT text or not? — A. Wolff, Nov 06 '14 at 17:40
@A.Wolff I'd imagine this individual doesn't create the select to begin with. Either way generic advice can be given. Which I think is good anyway, make them think about how to implement. — Jasper, Nov 06 '14 at 17:43
Sorry if my question doesn't make sense. I have a drop down which i have no control over and i want to hide first option in it. Thanks — Ahmar Ali, Nov 06 '14 at 18:25

score 18 · Accepted Answer · edited May 23 '17 at 10:31

$("#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:

Select the <select /> element. (No pun intended)
Find <option /> elements within the previously selected element. I used find() because if there are option groups then children() won't work.
Filter down to only the first <option /> element.
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?

score 9 · Answer 2 · answered Nov 06 '14 at 17:36

9

$('select > option:first').hide();

All your first select option hidden with this.

answered Nov 06 '14 at 17:36

Gael

167
6

This will generally work but if there are `` elements then the `` elements won't be direct descendants of the `` element. – Jasper Nov 07 '14 at 19:19
Thanks.. Its working fine... – Abijith Ajayan Sep 04 '17 at 11:58

score 5 · Answer 3 · answered Nov 06 '14 at 17:59

5

HTML

<select id='test'>
    <option value='1'> op 1 </option>
    <option value='2'> op 2 </option>
    <option value='3'> op 3 </option>
    <option value='4'> op 4 </option>
</select>

Jquery

$(document).ready(function() {
    $("#test").find("option").eq(0).remove();
});

that's it!

answered Nov 06 '14 at 17:59

Zanoldor

378
6
13

I'm sorry, when I was answering and testing the codes and after that I submitted my answer appeared all other answers. I'm sorry. – Zanoldor Nov 07 '14 at 15:37

score 1 · Answer 4 · answered Nov 06 '14 at 17:34

1

What you can do is use CSS like this as it works in sync with the select loading like this:

#select-item:first-child {
    display: none;
}

answered Nov 06 '14 at 17:34

Hive7

3,599
2
22
38

The selector you provided I believe is incorrectly written. This idea also doesn't appear to work in IE 11. – Jasper Nov 07 '14 at 19:10

Hide first option in select

4 Answers4

Linked