【JavaScript】 アドエス編 (その2) onChange

2007.08.02 Author: たわばがに

前回に引き続き、アドエスAdvanced/W-ZERO3[es] )上での JavaScript ネタです。
今回も前回に引き続き、イベントハンドラ系の実験です。
ということで、さくっとサンプルを作ってみました。
<script>
<!--
function changePulldown() {
    o = document.form1.pull2;
    if (document.form1.pull1.value == 1) {
        o.length = 2;
        o.options[0].text = "ワン";
        o.options[1].text = "トゥー";
    } else if (document.form1.pull1.value == 2) {
        o.length = 3;
        o.options[0].text = "アインス";
        o.options[1].text = "ツヴァイ";
        o.options[2].text = "ドゥライ";
    } else {
        o.length = 1;
        o.options[0].text = "なんもない";
    }
}
//-->
</script>
<form name="form1" method="post" action="">
<h1>[アドエス実験君2号]</h1>
<select name="pull1" onChange="changePulldown()">
  <option value="0">-</option>
  <option value="1">えいご</option>
  <option value="2">どいつご</option>
</select>
<br><br>
<select name="pull2">
  <option>なんもない</option>
</select>
</form>
スクリプトの内容は説明しなくても分かるかと思いますが、念のため。
1つ目のプルダウンを切り替えたら2つ目のプルダウンの内容が動的に変化する、というものです。

前回はキーイベントで意外な結果が出たわけですが、今回はどうでしょうか。
説明が抜けましたが、今回も以下の3ブラウザで実験します。

InternetExplorer Mobile
Opera Mobile
LunaScape Mobile

で、以下が結果。

InternetExplorer Mobile
正常に動作。ちゃんと動的に2つ目のプルダウンが切り替わります。

Opera Mobile
正常に動作。ちゃんと動的に2つ目のプルダウンが切り替わります。

LunaScape Mobile
正常に動作。ちゃんと動的に2つ目のプルダウンが切り替わります。

‥‥ほっと一安心。
前回のような、訳のわからない結果にならなくてよかったです。

とりあえず簡単な実験ばかりでは変化に乏しいつまり飽きたので、
次回は Ajax アプリの実験を行う予定です。
乞うご期待。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ