OnClick Dropdown works in FireFox but not Chrome o

问题:

The following code works perfectly in Firefox, but not in IE or Chrome... Any ideas why?

<script type="text/javascript">
function display_div(show){
   document.getElementById('passenger1').style.display = "none";
   document.getElementById('passenger2').style.display = "none";
   document.getElementById('passenger3').style.display = "none";
   document.getElementById(show).style.display = "block";
}
</script>

<select name="#" id="#">
      <option selected="selected"> </option>
      <option onClick="display_div('passenger1');">1</option>
      <option onClick="display_div('passenger2');">2</option>
      <option onClick="display_div('passenger3');">3</option>
</select>

<div id="passenger1" style="display:none;"> hey, 1 works </div>
<div id="passenger2" style="display:none;"> hey, 2 works </div>
<div id="passenger3" style="display:none;"> hey, 3 works </div>

回答1:

Move the onChange function

http://jsfiddle.net/WmEAp/

回答2:

move the "onClick" from options to the select element

<select onchange="this(this.selectedIndex)">
    <option value="passenger1">1</option>

回答3:

onclick on option is not a valid click handler. Use onchange on the select instead.

回答4:

IE and Chrome don't recognize events on option elements of a select. You can remove the onclick events from your options and add the following onchange event to your select element to get it to work with your current code:

onchange="display_div('passenger' + this.value);"