複数の SELECT タグを連動する(クライアントサイドスクリプト版) (unibon)

2000年04月03日: 新規作成。
ブラウザ上の複数の SELECT タグ(ドロップダウンリストボックス)を連動します。
ここでは、説明を簡単にするため、サーバサイドが無関係であり、クライアントサイドだけのスクリプトの例について書きます。
ちなみに、ここで使うスクリプトは、実際は、別に説明するサーバサイドスクリプトとクライアントサイドスクリプトの連携のためのプログラムが生成したスクリプトです。
実際にこのページにクライアントサイドのスクリプトが埋めこんであります(結果表示の部分だけ若干手を加えています)。以下の HTML FORM で、左側の SELECT タグを選択するたびに、右側の SELECT タグの内容が連動して書き換わります。
example.htm
<HTML>
<HEAD>
<TITLE>SELECT タグの連動 (最初にクライアントサイドに一括ダウンロード)</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function funcSubmit() {
    if (document.formMain.pref.selectedIndex == 0 && document.formMain.city.selectedIndex == 0) {
        window.alert("都道府県と市町村を選択してください");
        return false;
    } else if (document.formMain.pref.selectedIndex == 0) {
        window.alert("都道府県を選択してください");
        return false;
    } else if (document.formMain.city.selectedIndex == 0) {
        window.alert("市町村を選択してください");
        return false;
    } else {
        return true;
    }
}

function funcMain(b) {
    if (document.formMain.pref.selectedIndex == 0) {
        document.formMain.city.length = 1;
        document.formMain.city.selectedIndex = 0;
    } else {
        if (b) {
            document.formMain.city.length = 1;
            document.formMain.city.selectedIndex = 0;
        }
        var city = cities[document.formMain.pref.selectedIndex - 1];
        document.formMain.city.length = city.length + 1;
        for (var i = 0; i < city.length; i++) {
            document.formMain.city.options[i + 1].value = i;
            document.formMain.city.options[i + 1].text = city[i];
        }
    }
}

var prefs = new Array("東京都", "大阪府", "愛知県", "千葉県");
var cities = new Array();
cities[0] = new Array("小平市", "町田市", "三鷹市");
cities[1] = new Array("大阪市", "豊中市");
cities[2] = new Array("名古屋市", "半田市", "瀬戸市");
cities[3] = new Array("千葉市", "市川市", "船橋市", "野田市", "柏市");
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="funcMain(false)">
<FORM NAME=formMain METHOD=POST ACTION=result.asp onSubmit="return funcSubmit()">
<SELECT NAME="pref" onChange="funcMain(true)">
<OPTION VALUE="" SELECTED>(都道府県を選択してください)
<OPTION VALUE="0">東京都
<OPTION VALUE="1">大阪府
<OPTION VALUE="2">愛知県
<OPTION VALUE="3">千葉県
</SELECT>
<SELECT NAME="city">
<OPTION VALUE="" SELECTED>(市町村を選択してください)
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
<OPTION VALUE="">
</SELECT>
<INPUT TYPE=submit VALUE="登録">
</FORM>
</BODY>
</HTML>

複数の SELECT タグを連動する の目次
ASP の目次
ホーム
(このページ自身の絶対的な URL)