onclick event in HTML <select> not working Chrome and Safari

Question

I have different JavaScript function associated with each option tag to toggle layers on/off in an OpenLayers map. It works fine Opera, Firefox and IE9, but not in Chrome and Safari. I read that I could use onchange on the select tag, but since I'm new to JavaScript, I don't really how it would call four different functions?

<select size="1" name="usgsfeed" id="usgsfeed">
<option value="usgs_hour" onclick="display_usgs_hour();">Past hour, all earthquakes</option>
<option value="usgs_day" onclick="display_usgs_day();" SELECTED>Past day, magnitude > 1</option>
<option value="usgs_week" onclick="display_usgs_week();">Past week, magnitude > 2.5</option>
<option value="usgs_month" onclick="display_usgs_month();">Past month, magnitude > 2.5</option>
<option value="none" onclick="display_none();">None</option>
</select>

Solution 1

Call the function according to the select's value:

<select onchange="window['display_'+this.value]();">

If the value is "usgs_hour" the concatenation would be 'display_' + 'usgs_hour' === 'display_usgs_hour' and that function is called.

jsfiddle demo: http://jsfiddle.net/Ag3kh/

Solution 2

use switch construction for selected value

$('#usgsfeed').change(function () {
    swith($(this).val()) {
    case 'usgs_hour':
        display_usgs_hour();
        break;.....
    }
})

Solution 3

you should indeed use onchange!

To do this in javascript (not jquery) this would work:

JavaScript:

<script type='text/javascript'>

function SelectChanged()  {  
    if (document.aform.usgsfeed.value == "usgs_hour")  {
        alert("usgs_hour chosen");
    else if( ...etc) 
    }  
 }

</script>

HTML:

<form name="aform">
    <select size="1" name="usgsfeed" id="usgsfeed"  onchange='SelectChanged();>
        <option value="usgs_hour">Past hour, all earthquakes</option>
        <option value="usgs_day" SELECTED>Past day, magnitude > 1</option>
        <option value="usgs_week">Past week, magnitude > 2.5</option>
        <option value="usgs_month">Past month, magnitude > 2.5</option>
        <option value="none">None</option>
    </select>
</form>

Solution 4

Have a look at the jsFiddle demo: jsfiddle.net/bWdaU/.

It uses onchange to call the function display_usgs_change.

I have added a temporary <div> to show the selection working.

HTML:

<select id="usgsfeed" name="usgsfeed" size="1" onchange="display_usgs_change();">
    <option value="usgs_hour">Past hour, all earthquakes</option>
    <option value="usgs_day" selected="selected">Past day, magnitude > 1</option>
    <option value="usgs_week">Past week, magnitude > 2.5</option>
    <option value="usgs_month">Past month, magnitude > 2.5</option>
    <option value="none">None</option>
</select>
<div id="dummy">Remove this div!</div>​

JS:

function display_usgs_change() {
    document.getElementById('dummy').innerHTML = event.target.value;
}​

View more solutions