style.display='none' doesn't work on option tags in chrome, but it does in firefox
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.
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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