複数の SELECT タグを連動する(フレームを使ったサーバ・クライアント動的連携版、DBMS 使用) (unibon)

2000年04月19日: 新規作成。
2001年12月02日: Web サーバ上での実稼動例を表示できるようにした。Server.HTMLEncode を自前でおこなうようにした。META タグで charset=Shift_JIS を指定するようにした。
ブラウザ上の複数の SELECT タグ(ドロップダウンリストボックス)を連動します。
サーバサイドスクリプトとクライアントサイドスクリプトが連携し、データベースとして Jet(MS Access) を使用した例です。
datasource.asp の Const datasource は、接続文字列をお使いの環境に応じて適宜設定してください。

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

datasource.asp 
<%
Const datasource = "DSN=prefcity"
%>

prefcity.mdb
prefcity.zipをダウンロード後、展開すると prefcity.mdb が得られます。

framesetdb.htm 
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>SELECT タグの連動 (オンデマンドでサーバサイドと FRAME でやりとり)</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=0 ROWS="100%,*">
<FRAME SRC=framemaindb.asp NAME=mymain NORESIZE>
<FRAME SRC=framesubdb.asp NAME=mysub NORESIZE>
</FRAMESET>
</HTML>

framemaindb.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
%><!-- #include file = "datasource.asp" --><OBJECT ID=adoConn PROGID="ADODB.Connection" RUNAT=Server SCOPE=Page>
</OBJECT><HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>メイン</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;
        }
        document.formHidden.pref.value = document.formMain.pref.options[document.formMain.pref.selectedIndex].value;
        document.formHidden.submit();
    }
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="funcMain(false)">
<FORM NAME=formMain TARGET="_parent" METHOD=POST ACTION=resultdb.asp onSubmit="return funcSubmit()">
<SELECT NAME="pref" onChange="funcMain(true)">
<OPTION VALUE="" SELECTED>(都道府県を選択してください)<%
Call adoConn.Open(datasource)
Dim adoRs
Set adoRs = adoConn.Execute("SELECT prefid, prefname FROM preftable ORDER BY prefid")
Do Until adoRs.EOF
%>
<OPTION VALUE="<%=adoRs.Fields("prefid").Value%>"><%=HTMLEncode(adoRs.Fields("prefname").Value)%>
<%
    Call adoRs.MoveNext()
Loop
Call adoRs.Close()
%>
</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>
<FORM NAME=formHidden TARGET="mysub" METHOD=GET ACTION=framesubdb.asp>
<INPUT TYPE=hidden NAME=pref>
</FORM>
</BODY>
</HTML>

framesubdb.asp 
<%@Language=VBScript EnableSessionState=False%><%Option Explicit%><!-- #include file = "datasource.asp" --><OBJECT ID=adoConn PROGID="ADODB.Connection" RUNAT=Server SCOPE=Page>
</OBJECT>
<%
Function strJS(ByVal s)
    Dim x
    x = Replace(s, "\", "\\")
    Dim y
    y = Replace(x, """", "\""")
    strJS = y
End Function
%><HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>サブ</TITLE>
<SCRIPT LANGUAGE=JavaScript>
<!--
function funcSub() {
<%
Dim pref
pref = Request.QueryString("pref")
If IsEmpty(pref) Then
ElseIf Not IsNumeric(pref) Then
Else
    Call adoConn.Open(datasource)
    Dim adoRs
    Set adoRs = adoConn.Execute("SELECT cityid, cityname FROM citytable WHERE prefid = " & pref & " ORDER BY cityid")
    Dim i
    i = 0
    Dim cityid()
    Dim cityname()
    Do Until adoRs.EOF
        ReDim Preserve cityid(i)
        cityid(i) = adoRs.Fields("cityid").Value
        ReDim Preserve cityname(i)
        cityname(i) = adoRs.Fields("cityname").Value
        Call adoRs.MoveNext()
        i = i + 1
    Loop
    Dim c
    c = i
    Call adoRs.Close()
    Call adoConn.Close()
%>    parent.mymain.document.formMain.city.options.length = <%=c + 1%>;
<%
    For i = 0 To c - 1
%>    parent.mymain.document.formMain.city.options[<%=i + 1%>].value = "<%=cityid(i)%>";
    parent.mymain.document.formMain.city.options[<%=i + 1%>].text = "<%=strJS(cityname(i))%>";
<%
    Next
End If
%>}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="funcSub()">
</BODY>
</HTML>

resultdb.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
%><!-- #include file = "datasource.asp" --><OBJECT ID=adoConn PROGID="ADODB.Connection" RUNAT=Server SCOPE=Page>
</OBJECT><HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>結果</TITLE>
</HEAD>
<BODY>
<%
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 IsEmpty(city) Then
ElseIf Not IsNumeric(city) Then
Else
    b = True
End If

If b Then
    Call adoConn.Open(datasource)
    Dim adoRs
    Set adoRs = adoConn.Execute("SELECT prefname, cityname FROM preftable INNER JOIN citytable ON preftable.prefid = citytable.prefid WHERE preftable.prefid = " & pref & " AND cityid = " & city)
    If adoRs.EOF Then
%>エラー
<%
    Else
%>都道府県: <%=HTMLEncode(adoRs.Fields("prefname").Value)%><BR>
市町村: <%=HTMLEncode(adoRs.Fields("cityname").Value)%><BR>
<%
    End If
    Call adoRs.Close()
    Call adoConn.Close()
End If
%></BODY>
</HTML>

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