HTML javascript select action

Question

I have a selection list:

<select>
<option value="0" onclick="anders('1')">Anders</option>
<option value="200" onclick="anders('');" selected="selected">&#8364; 200,-</option>
<option value="300" onclick="anders('')">&#8364; 300,-</option>
<option value="400" onclick="anders('')">&#8364; 400,-</option>
<option value="500" onclick="anders('')">&#8364; 500,-</option>
</select>

When I select the value "0", something should be visible, it works in firefox, but not in Internet Explorer. Even the warning function with onclick does not work in IE, does anyone know something for this?

Answer 1

You should probably bind this logic to the onchange event of the selection itself, and not to the click event of individual parameters:

var myDiv = document.getElementById("myDiv");
document.getElementById("mySelect").onchange = function(){
  myDiv.style.display = (this.selectedIndex == 0) ? "block" : "none";
}

When we link it this way, we don’t need to mix our HTML and our Javascript. Our HTML may look as simple as the following:

<select id="mySelect" name="values">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>
<div id="myDiv">
  <p>Select 0 to show me, otherwise I'm invisible!</p>
</div>

Online demo: http://jsbin.com/ijogi