Geek Answers Handbook

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

I have another JavaScript function associated with each parameter tag to enable / disable layers on an OpenLayers map. It works fine with Opera, Firefox, and IE9, but not in Chrome and Safari. I read that I can use onchange in the select tag, but since I'm new to JavaScript, I really don't understand how it will 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>
+4
source share
4 answers

Call the function according to the selection value:

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

If the value is "usgs_hour" , the concatenation will be 'display_' + 'usgs_hour' === 'display_usgs_hour' and this function is called.

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

+9
source

use the switch design for the selected value

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

you really have to use onchange!

For this in javascript (not jquery) this will 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>
+1
source

Check out the jsFiddle demo: jsfiddle.net/bWdaU/ .

It uses onchange to call the display_usgs_change function.

I added a temporary <div> to show how the selection works.

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; }​
0
source

More articles:


All Articles