セレクトオブジェクトで値を選択時にイベントを発生させ、
アラートを発生させるような処理を書いていきます。
onChangeもしくはonClickで記述する方法がありますが、
selectタグ内に書かれたonChangeはうまく動かない場合があります。
onChangeで書くと以下のようになります。
<div id=”result”>変更前</div>
<div id=”btn”>ボタン</div>
<div id=”btn”>ボタン</div>
<html>
<form name=”select”>
<select name=”data” onChange=”selectCheck();”>
<option value=”1″>１</option>
<option value=”2″>２</option>
<option value=”3″>３</option>
</select>
</form>
<script type=”text/javascript”>
function selectCheck()
{
var data = document.select.data.value;
alert(data);
}
</script>
</html>
<form name=”select”>
<select name=”data” onChange=”selectCheck();”>
<option value=”1″>１</option>
<option value=”2″>２</option>
<option value=”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″>１</option>
<option onClick=”selectCheck();” value=”2″>２</option>
<option onClick=”selectCheck();” value=”3″>３</option>
</select>
<select name=”data””>
<option onClick=”selectCheck();” value=”1″>１</option>
<option onClick=”selectCheck();” value=”2″>２</option>
<option onClick=”selectCheck();” value=”3″>３</option>
</select>
しかし、ブラウザによってはうまく動作しないのもあるようです。。。
