Hide list item in jquery

Question

I want to hide list item in jquery, but its getting failed if i do like this,

$(Name + "-myList option[value=" + selectedItem + "]").hide(); //fails

But how come these two options disable and remove works:

$(Name + "-myList option[value=" + selectedItem + "]").attr("disabled", "disabled");

$(Name + "-myList option[value=" + selectedItem + "]").remove();

Here is my list code

<select id="myList" class="DropDownList Test" name="List">                                           
    <option value="selectid" selected="selected">--Please Select--</option> 
    <option value="test1">a</option> 
    <option value="test2">b</option> 
    <option value="test3">c</option>               
</select>

PassKit · Accepted Answer · 2013-01-08 10:07:59Z

2

.hide() will not hide the item because .hide() works by adding the inline css display:none to the element. Almost all browsers do not allow an option element to be styled.

Disabling the option will not remove or hide the option, but will make it appear greyed out and unavailable for selection. The disabled attribute can be easily toggled if you need to re-enable the option later..

remove() completely removes the element from the DOM, so if you use this approach you will need to recreate it with $('#mylist').append( new Option('text','value')); in order to display it again.

edited Jan 8, 2013 at 10:07

answered Jan 8, 2013 at 9:28

PassKit

12.6k5 gold badges60 silver badges78 bronze badges

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

5 Comments

Naruto Over a year ago

i just want to hide and show whenver i want, wat is the solution for it.. should i add display:none in my list creation in HTML?

PassKit Over a year ago

display:none will never work. If you want to completely hide it then use remove() and then recreate the element when you want to show it again. $('#mylist').append( new Option('text','value')); should do the trick.

Naruto Over a year ago

Hi Passkit, it would be great if u do me one help. i.e how can i insert at particular position. i.e if i have removed 2nd element then i want to put it back at 2nd position, could pls provide me sytax

Naruto Over a year ago

remove is working but if i try to add nothing is getting displayed in list, pls help me :(

PassKit Over a year ago

Have a look at this fiddle for a pointer on how to insert at the nth position. Without seeing your code it's impossible to tell why it is not working.

Jason Evans · Accepted Answer · 2013-01-08 09:31:20Z

1

You can use the jQuery :selected selector like so:

$(Name + "-myList option :selected").attr("disabled", "disabled");
$(Name + "-myList option :selected").remove();

This will make getting the selected item easier.

As for hiding the item, looks like @PassKit has explained why .hide() will not work.

edited Jan 8, 2013 at 9:31

answered Jan 8, 2013 at 9:25

Jason Evans

29.2k16 gold badges95 silver badges157 bronze badges

1 Comment

Jason Evans Over a year ago

@LLL Check @PassKit's answer, he explains why display:none does not work.

Collectives™ on Stack Overflow

Hide list item in jquery

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related