複数の SELECT タグを連動する(サーバサイドとクライアントサイドの静的連携版) (unibon)

2000年04月03日: 新規作成。
2001年12月02日: Web サーバ上で実稼動している例を追加。Server.HTMLEncode を自前でおこなうようにした。
ブラウザ上の複数の SELECT タグ(ドロップダウンリストボックス)を連動します。
サーバサイドスクリプトとクライアントサイドスクリプトが連携した例です。 サーバサイドでデータベースとして VBScript 上の配列(Array)として、都道府県およびその中の市町村のデータが格納されています。 これを元に、クライアントサイド用のスクリプトを生成してクライアントに送ります。データベースは配列でなくても、DBMS などから得たデータでも良いです。サーバサイドの情報をクライアントに一括して送り込める点が便利です。

実際に Web サーバ上で動く例は こちら です(別ウィンドウが開きます。なお、Web サーバが停止していることもあります)。

サーバサイドにあるデータを更新するだけで、クライアントサイド用のスクリプトが更新されるため、大規模なデータを扱う場合の保守が容易になるでしょう。なお、これが不要であり、クライアントサイドのスクリプトだけで良い場合は、単にこのプログラムが生成したクライアントサイドのスクリプトを抜き出して使うだけでよいでしょう。すでに抜き出し済みのスクリプトとしてまとめたものはこちらです。

database.asp
<%
Dim prefs(3)
prefs(0) = "東京都"
prefs(1) = "大阪府"
prefs(2) = "愛知県"
prefs(3) = "千葉県"

Dim cities(3)
cities(0) = Array("小平市", "町田市", "三鷹市")
cities(1) = Array("大阪市", "豊中市")
cities(2) = Array("名古屋市", "半田市", "瀬戸市")
cities(3) = Array("千葉市", "市川市", "船橋市", "野田市", "柏市")
%>

static.asp
<%@Language=VBScript EnableSessionState=False%><%Option Explicit%><%
Function HTMLEncode(ByVal s)
    s = Replace(s, "&", "&amp;")
    s = Replace(s, """", "&quot;")
    s = Replace(s, "<", "&lt;")
    s = Replace(s, ">", "&gt;")
    HTMLEncode = s
End Function

Function strJS(ByVal s)
    Dim x
    x = Replace(s, "\", "\\")
    Dim y
    y = Replace(x, """", "\""")
    strJS = y
End Function
%><!-- #include file = "database.asp" --><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(<%
    Dim s
    s = ""
    Dim i
    For i = 0 To UBound(prefs)
        If i > 0 Then
            Call Response.Write(", ")
        End If
        Call Response.Write("""" & strJS(prefs(i)) & """")
    Next
%>);
var cities = new Array();
<%
    For i = 0 To UBound(cities)
%>cities[<%=i%>] = new Array(<%
        Dim city
        city = cities(i)
        Dim j
        For j = 0 To UBound(city)
            If j > 0 Then
                Call Response.Write(", ")
            End If
            Call Response.Write("""" & strJS(city(j)) & """")
        Next
%>);
<%
    Next
%>// -->
</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>(都道府県を選択してください)<%
For i = 0 To UBound(prefs)
%>
<OPTION VALUE="<%=i%>"><%=HTMLEncode(prefs(i))%>
<%
Next
%>
</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>

result.asp
<%@Language=VBScript EnableSessionState=False%><%Option Explicit%><!-- #include file = "database.asp" --><HTML>
<HEAD>
<TITLE>結果</TITLE>
</HEAD>
<BODY>
<%
Function HTMLEncode(ByVal s)
    s = Replace(s, "&", "&amp;")
    s = Replace(s, """", "&quot;")
    s = Replace(s, "<", "&lt;")
    s = Replace(s, ">", "&gt;")
    HTMLEncode = s
End Function

Dim pref
pref = Request.Form("pref")
Dim city
city = Request.Form("city")
Dim b
b = False
If IsEmpty(pref) Then
ElseIf Not IsNumeric(pref) Then
ElseIf CLng(pref) < 0 Then
ELseIf CLng(pref) > UBound(prefs) Then
ElseIf IsEmpty(city) Then
ElseIf Not IsNumeric(city) Then
ElseIf CLng(city) < 0 Then
ELseIf CLng(city) > UBound(cities(CLng(pref))) Then
Else
    b = True
End If

If b Then
%>都道府県: <%=HTMLEncode(prefs(CLng(pref)))%><BR>
市町村: <%=HTMLEncode(cities(CLng(pref))(CLng(city)))%><BR>
<%
Else
%>エラー
<%
End If
%></BODY>
</HTML>


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