Hide select box in IE?

Question

I am trying to hide a drop-down using JavaScript. The following code I have gotten to work in Firefox and Chrome but testing in IE 8 it does not work.

<select name="month" id="month" onchange="monthselector_changed(this)">
  <option  value="1">
        Jan</option>
  <option  value="2">
        Feb</option>
  <option  value="3">
        Mar</option>
  <option  value="4">
        Apr</option>
  <option  value="5">
        May</option>
  <option  value="6">
        Jun</option>
  <option  value="7">
        Jul</option>
  <option  value="8">
        Aug</option>
  <option  value="9">
        Sep</option>
  <option  value="10">
        Oct</option>
  <option selected value="11">
        Nov</option>
  <option  value="12">
        Dec</option>
  </select>

I then hide it using the following code

document.getElementById("month").style.display = 'none';

Just for clarfication I am trying to hide then entire select box not an option.

You should REALLY look into a framework like JQuery. – Iznogood Nov 13 '12 at 20:57 — Iznogood, Nov 13 '12 at 20:57
It works here.. [Fiddle](http://jsfiddle.net/772Z2/1) IE8 – James Kleeh Nov 13 '12 at 21:40 — James Kleeh, Nov 13 '12 at 21:40

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

$ is invalid in an ID field, so that's probably messing up IE while other browers are being more "relaxed" about the rule.

See this thread for details: What characters are allowed in DOM IDs?

Edit: I see you're passing in this to a function call. You can use this to do the toggling without an ID. For example:

http://jsbin.com/acisof/1/edit

function monthselector_changed(elem)
{
    elem.style.display = 'none';
}

edited May 23 '17 at 11:52

Community

1
1

answered Nov 13 '12 at 20:58

Eli Gassert

9,745
3
30
39

the ID is not causing the problem, for testing I changed it to month and did document.getElementById("month"). I have updated the above question to show this. – Halfwarr Nov 13 '12 at 21:17
Then check the JS console for errors. F12. My guess is there's an error. – Eli Gassert Nov 14 '12 at 02:07
no errors, was something odd about how .jsp was working with the page. setting it to style.visibility = 'hidden'; worked for IE. In the console I actually just ran document.getElementById("month").style.display = 'none';. This caused it to disappear but the second you clicked on the page it became visible again. Only happened in IE, setting the visibility to hidden stayed hidden. – Halfwarr Nov 14 '12 at 15:01

Hide select box in IE?

1 Answers1