web-dev-qa-db-ja.com

HTMLのonclickイベント<select>が機能しないChromeおよびSafari

OpenLayersマップでレイヤーのオン/オフを切り替えるために、各オプションタグに関連付けられた異なるJavaScript関数があります。 Opera、Firefox、IE9では問題なく動作しますが、ChromeとSafariでは動作しません。selectタグでonchangeを使用できると読みましたが、JavaScriptを初めて使用するため、使用しません。本当に4つの異なる関数をどのように呼び出すのでしょうか？

<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>
javascripthtmlformsgoogle-chromesafari
7
cba

選択の値に従って関数を呼び出します。

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

値が"usgs_hour"の場合、連結は'display_' + 'usgs_hour' === 'display_usgs_hour'になり、その関数が呼び出されます。

jsfiddleデモ： http://jsfiddle.net/Ag3kh/

14
Esailija

選択した値にスイッチ構造を使用する

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

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;
}​
1
uınbɐɥs

あなたは確かに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>
1
Sindre