0

I am trying to hide some <options> tags with jquery but it doesn't seem to work.

  • I want to hide all options that have the rel attribute.

  • Show only options for rel='3'

This code works on FF and Chrome. Doesn't work IE, Safari and Opera.

Here is my jsfiddle:

http://jsfiddle.net/RnfqW/4/

Here is the markup and script:

<select name="myselect" id="myselect" > <option value=''></option> <option rel='1' value='1A'>1A</option> <option rel='1' value='1B'>1B</option> <option rel='2' value='2A'>2A</option> <option rel='2' value='2B'>2B</option> <option rel='2' value='2C'>2C</option> <option rel='3' value='3A'>3A</option> <option rel='3' value='3B'>3B</option> <option rel='3' value='3C'>3C</option> <option rel='3' value='3D'>3D</option> </select>

Script:

$("#myselect [rel]").hide(); // hide all options $("#myselect [rel=3]").show(); // hide whow only rel=3 options
Improve this question
5
  • possible duplicate of remove works but not hide? Commented Feb 3, 2012 at 13:12
  • Refer to the following question. It is solved. Commented Feb 3, 2012 at 13:17
  • 1
    The problem with removing is you can't recreate it back. Commented Feb 3, 2012 at 13:22
  • @Boris: removing it from the document doesn't destroy it if you assign it to a variable, and you can add it back when you need it again. See the duplicate questions. Cloning and deleting is a poor approach in comparison. Commented Feb 4, 2012 at 10:33
  • @AndyE: you're probably right, I'm not an expert on this subject. Was just trying to help. Commented Feb 6, 2012 at 11:51

2 Answers 2

Reset to default
1

You can't hide or show options. What you must do is clone your select and delete option tags you don't want.

EDIT : something like that http://jsfiddle.net/RnfqW/5/

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

Comments

0

Check out this code and customize it. I hope it will be useful...

$(function(){ $.fn.extend({ slidingSelect: function(options) { var select= $(this); var selector=select.selector; var selectedValue="";//=select.val(); var divToggle=$("<div>"+selectedValue+"select Complaint<span style='float:right;'>&#x25BC;</span></div>").attr({id:select.attr("id")+"Toggle"}).click(function(){ $(selector).slideToggle(); }).insertBefore(select); select.attr("size",6); select.change(function(){ divToggle.html(select.val()+"<span style='float:right;'>&#x25BC;</span>"); $(selector).slideToggle(); }); } }); $("#complaint").hide().slidingSelect(); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.