Javascript HTML <select> 中的 onclick 事件不适用于 Chrome 和 Safari
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11382949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick event in HTML <select> not working Chrome and Safari
提问by cba
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?
我有不同的 JavaScript 函数与每个选项标签相关联，以在 OpenLayers 地图中打开/关闭图层。它适用于 Opera、Firefox 和 IE9，但不适用于 Chrome 和 Safari。我读到我可以在 select 标签上使用 onchange ，但是由于我是 JavaScript 的新手，我真的不知道它会如何调用四个不同的函数？
<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>
回答by Esailija
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.
如果值是"usgs_hour"串联'display_' + 'usgs_hour' === 'display_usgs_hour'，则调用该函数。
jsfiddle demo: http://jsfiddle.net/Ag3kh/
jsfiddle 演示：http: //jsfiddle.net/Ag3kh/
回答by Andrey Vorobyev
use switch construction for selected value
对选定值使用开关结构
$('#usgsfeed').change(function () {
swith($(this).val()) {
case 'usgs_hour':
display_usgs_hour();
break;.....
}
})
回答by Sindre
you should indeed use onchange!
你确实应该使用onchange！
To do this in javascript (not jquery) this would work:
要在 javascript (不是 jquery) 中执行此操作，这将起作用：
JavaScript:
JavaScript：
<script type='text/javascript'>
function SelectChanged() {
if (document.aform.usgsfeed.value == "usgs_hour") {
alert("usgs_hour chosen");
else if( ...etc)
}
}
</script>
HTML:
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>
回答by u?nb??s
Have a look at the jsFiddle demo: jsfiddle.net/bWdaU/.
看看 jsFiddle 演示：jsfiddle.net/bWdaU/。
It uses onchangeto call the function display_usgs_change.
它用于onchange调用函数display_usgs_change。
I have added a temporary <div>to show the selection working.
我添加了一个临时<div>显示选择工作。
HTML:
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:
JS：
function display_usgs_change() {
document.getElementById('dummy').innerHTML = event.target.value;
}?
