【Javascript】selectタグのonChange,onClickイベント(サンプルコード)

Javascript

セレクトオブジェクトで値を選択時にイベントを発生させ、
アラートを発生させるような処理を書いていきます。
onChangeもしくはonClickで記述する方法がありますが、
selectタグ内に書かれたonChangeはうまく動かない場合があります。
onChangeで書くと以下のようになります。

<div id=”result”>変更前</div>
<div id=”btn”>ボタン</div>
<html>
<form name=”select”>
<select name=”data” onChange=”selectCheck();”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</select>
</form>
<script type=”text/javascript”>
function selectCheck()
{
var data = document.select.data.value;
alert(data);
}
</script>
</html>

onChangeをonClickに変更しても期待と違うときにアラートが出たりして
うまく期待通りに動いてくれないときがあります。

そんなときは以下を試してみてください。
上記のformタグ内を書き換えます。
すべてのoptionタグにonClick属性をつけます。

<form name=”select”>
<select name=”data””>
<option onClick=”selectCheck();” value=”1″>1</option>
<option onClick=”selectCheck();” value=”2″>2</option>
<option onClick=”selectCheck();” value=”3″>3</option>
</select>

しかし、ブラウザによってはうまく動作しないのもあるようです。。。

タイトルとURLをコピーしました