我有不同的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>
根据select的值调用函数:
<select onchange="window['display_'+this.value]();">
如果值是"usgs_hour"
,则串联将是'display_' + 'usgs_hour' === 'display_usgs_hour'
,并且调用该函数。
jsfiddle演示:http://jsfiddle.net/Ag3kh/
对所选值使用开关结构
$('#usgsfeed').change(function () {
swith($(this).val()) {
case 'usgs_hour':
display_usgs_hour();
break;.....
}
})
您确实应该使用onchange!
要在javascript(而不是jquery)中做到这一点,这将起作用:
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>
看看jsFiddle演示:jsFiddle.net/bWdaU/.
它使用onchange
来调用函数display_usgs_change
。
我添加了一个临时<div>
来显示选择正在工作。
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;
}