HTML中的onclick事件<选择>无法运行Chrome和Safari

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

本文关键字：运行 Chrome Safari 选择 onclick 中的 事件 lt HTML gt      更新时间：2023-09-26

我有不同的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;
}​
相关文章：