ansaurus

Question

style.display='none' doesnt work on option tags in chrome, but it does in firefox, anyone know why? or a workaround?

Answer 1

+2 A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
removeIt = function()
{
    var theSelect = document.getElementById("theSelect");
    var theOption = document.getElementById("theOption");
    theSelect.removeChild(theOption);
};
</script>
</head>
<body>
<select id="theSelect">
<option>1</option>
<option id="theOption">2</option>
<option>3</option>
</select>
<input type="button" onclick="removeIt()" value="remove it!"/>
</body>
</html>

I quickly got it working by simply removing it from its parentNode... obviously this is going to be a hack.
I'll try to find a better solution for you =)

By the way, welcome to Stack Overflow

ItzWarty 2010-02-24 07:09:58

thanks itzwwarty, but i dont want to delete it, just hide it

2010-02-24 07:14:21

It isn't deleting it. It is simply removing it from the parent node. You can, later, call theSelect.appendChild(theOption); ..Although this would probably screw up the order [in my example it would become 1, 3, 2] Still trying to think of a solution.

ItzWarty 2010-02-24 07:16:21

Update: Sadly, I can't think of a better way. Perhaps, when you first do the removeChild() option, you could copy childNodes to another array, so you can keep order. Then when you reappend, you have to remove everything and reappend everything. Inefficient, but I can't think of a better way >_>

ItzWarty 2010-02-24 07:20:48

yes i guess i will have to try something like that, thanks

2010-02-24 07:30:03

Answer 2

+2 A:

The workaround is to remove the option elements in response to your event and add them back if and when they are needed. IIRC, IE will not allow you to set the display to none on option elements. I would advise storing the removed elements in an array so that you can easily add them back in

Russ Cam 2010-02-24 07:10:05

thanks for the advice Russ, i guess i will try that

2010-02-24 07:16:12

Answer 3

+2 A:

You probably have to remove the <option> instead of 'hiding' it. If it's not a solution for you, try disabling it.

document.getElementsByTagName('option')[0].disabled='disabled'

PS: You might want to reconsider using getElementsByTagName('option'), can get messy if you have more <select> elements.

o.k.w 2010-02-24 07:16:42

was just using that command as a simple example to demonstrate the problem

2010-10-07 16:44:01

Answer 4

+1 A:

The question is rather why that works in any browser at all?

The options are not used as elements in the page, they contain the information to show in the select element. Some browsers let you apply some styles to the options, but generally you can't really expect cross browser support for any styles at all.

If you want to keep an option from being displayed, you just have to remove it from the select.

Guffa 2010-02-24 07:29:36

Why the downvote? If you don't say what it is that you don't like, it can't improve the answer.

Guffa 2010-05-16 14:42:37

According to HTML specs display property is applicable to all elements, including option and optgroup.

Denis Otkidach 2010-08-24 12:18:44

@Denis Otkidach: Yes, in HTML, but this is no longer HTML, it's objects in the DOM. You would have to replace the entire select element with new HTML to get it parsed again.

Guffa 2010-08-24 13:02:56

ansaurus

tags:

views:

answers:

style.display='none' doesnt work on option tags in chrome, but it does in firefox, anyone know why? or a workaround?

related questions