5

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

Improve this question
10
  • 1
    do you have any code ? Provide a clear explanation of what you want to achieve Commented Nov 6, 2014 at 17:29
  • what exactly do you mean by first option? please add a code snippet Commented Nov 6, 2014 at 17:29
  • :first-child pseudo class maybe Commented Nov 6, 2014 at 17:32
  • Not sure about your question but maybe what you are looking for: stackoverflow.com/a/8442831/1414562 Commented Nov 6, 2014 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. Commented Nov 6, 2014 at 17:38

4 Answers 4

Reset to default
18 
$("#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?

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

All your first select option hidden with this.

Improve this answer

1 Comment

This will generally work but if there are <optgroup /> elements then the <option /> elements won't be direct descendants of the <select /> element.
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!

Improve this answer

1 Comment

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.
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; }
Improve this answer

1 Comment

The selector you provided I believe is incorrectly written. This idea also doesn't appear to work in IE 11.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.