Question

我在每个选项标签中都有不同的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>

Answer 1

根据选择的值调用该函数：

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

如果值为"usgs_hour"，则连接将为'display_' + 'usgs_hour' === 'display_usgs_hour'并且该函数被调用。

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

Answer 2

使用开关构造选择值

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

Answer 3

你确实应该使用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>

Answer 4

查看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;
}

HTML中的onclick事件<select>无法使用Chrome和Safari </select>

4 个答案: