WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:2つのselectboxの連動(DBから取得した値:可変)

0:[投稿] マーチ [2004/03/03 14:42 ][環境:IE6 WINXP WIN]

こんにちは。
ASPで開発しています。javaScript初心者で困っています。

1つ目のselectbox1には、テーブルXの項目Aを単純に書き出します。
2つの目のselectbox2では、1つ目と連動させて、テーブルXから
"where 項目A=(一つ目で選んだ値)"
で取得した項目Bを書き出したいと思っています。

そのために、selectbox1のoptionタグに、value以外に値「title(0〜n)=項目B」を持たせて、
selectタグのonChangeで、その値を使用するために次のように記述しました。
ただし、titleの個数が可変な為、配列要素としての値の渡し方がわかりません。
とりあえず、"title0"のみ渡す方法は以下で実現しています。
--------------------------------
<SELECT name=test
onChange='setMenuItem(this.selectedIndex,this[this.selectedIndex].title0)'>
<%
strSQL = "SELECT 項目A FROM テーブルX GROUP BY 項目A "
Set rs = Session("DB").DbCreateDynaset(strSQL, 0)
   Do while not rs.EOF
       strSQL2 =  "SELECT 項目B FROM テーブルX WHERE 項目A ='" &
rs("PGM_ID") & "'"
       Set rs2 = Session("DB").DbCreateDynaset(strSQL2,0)
Response.Write "<OPTION value=" & rs("項目A")
   i=0
       Do while not rs2.EOF
Response.Write " title" & i & "='" & rs2("項目B") & "'"
           i=i + 1
       rs0.movenext
       Loop
Response.Write ">"
Response.Write rs("項目A") & "</OPTION>"
   rs.movenext
   Loop
%>
</SELECT>
<SELECT name=test2>"
<OPTION></OPTION>"
--------------------------------
<script language="JavaScript">
<!--
function setMenuItem(n,s){  // 引数の数も可変にしたい

menuItem = [ [[s],"あ","い"], // s=title0**この要素をtitle数分書き込みたい。
  ["う","え","お"] ];

itemNum = 2; // 項目数
for (i=0; i<itemNum; i++)
{
 document.iddel.test2.options[i] = new
Option(menuItem[n][i],menuItem[n][i]);
}
}
// -->
</script>
--------------------------------
以下を参考にしました。
http://www.openspc2.org/reibun/javascript/form_selectmenu/015/index.html


1:[回答] Yachimata [2004/03/04 08:12 ]

asp が実行された結果の htmlも載せた方が、
回答が付きやすいかも知れませんね。


2:[回答] マーチ [2004/03/04 09:35 ]

うまく表現できていなくてわかりにくですね。すみません。

http://www.parkcity.ne.jp/~chaichan/qanda/qa4663.htm?04-01-13-17-08
上記のログで、
>1
で回答されている方法が知りたいと思っているのですが・・・

>ただ、CD1の変更時に必ずSQLを実行しなければならないかどうかは一考に値します。Table2の内容をSCRIPT要素内に(配列等として)書き出しておくことができるからです。

ひとまず今は、JavaScriptの中に、ASPを入れ込んで直接要素を書き出す方法を試しています。


3:[回答] gun [2004/03/04 10:29 ]

質問文が統一されてなくてよく分からないのですが、整理すると下のような希望ですか?

selectbox1のオプション(option)には(a)(b)のように値を持たせ、
    (a)valueとオプションラベルには項目Aの値
    (b)title(0〜n)には項目Aに対応した項目Bの値を列挙
selectbox1のonChangeイベントにて、selectbox2の内容を
selectbox1の選択された項目A(a)に対応した項目B(b)の値に
入れ替えたい。

//--------------------------------------------
function setMenuItem(num_SelectedIndex) {
    obj_select1 = document.getElementsByName('mySelect1')[0];
    obj_select2 = document.getElementsByName('mySelect2')[0];
    var valTitle;
    var i = 0;
    obj_select2.options.length = 0;
    while(true) {
        valTitle = eval('obj_select1.options[' +num_SelectedIndex +'].title' + i);
        if (valTitle==undefined) {
            break;
        }
        obj_select2.options[i++] = new Option(valTitle, valTitle);
    }
}

<!-- 最初の値をmySelect2にセット -->
<body onLoad="setMenuItem(0);">

<select name="mySelect1" onChange="setMenuItem(this.selectedIndex);">
<option title0=AAA0 title1=AAA1 title2=AAA2>AAA
<option title0=BBB0 title1=BBB1>BBB
<option title0=CCC0>CCC
</select>

<select name="mySelect2">
<option></option>
</select>


4:[回答] AC [2004/03/04 21:13 ]

>>2
http://www.parkcity.ne.jp/〜chaichan/qanda/qa4663.htm#r1
を読み誤っています。
http://www.parkcity.ne.jp/〜chaichan/qanda/qa4663.htm#r1
が意図しているのは、 クライアント側で実行されるscript要素内で
配列に値を代入するJavaScript文を出力する、ということです。

また、 >>0 で出力されるものは、HTMLとして誤っているため、
JavaScriptの動作は保証できません。
this.selectedIndex,this[this.selectedIndex].title0
というオブジェクトは存在しないのでエラーを出すブラウザもあり得ます。

具体的な方法はまた後で投稿します。


5:[回答] AC [2004/03/04 21:16 ]

>>4
失礼しました。URLを訂正します。
http://www.parkcity.ne.jp/~chaichan/qanda/qa4663.htm#r1
# 例によってSafariのバグ


6:[回答] AC [2004/03/04 23:29 ]

script要素内のJavaScriptの配列に値を代入する例です。
動作確認していないので、バグがあるかもしれません。

Oracle+oo4oと仮定して書いています。
<%
Dim strSQL, rs
Dim strSQL2, rs2
Dim strValueA, strValueB
Dim intCount
Const ORADYN_READONLY = &H4&

' Dynaset作成
strSQL = "SELECT 項目A FROM テーブルX GROUP BY 項目A"
strSQL2 = "SELECT 項目A, 項目B FROM テーブルX"
Set rs = Session("DB").DbCreateDynaset(strSQL, ORADYN_READONLY)
Set rs2 = Session("DB").DbCreateDynaset(strSQL, ORADYN_READONLY)
%>

<script type="text/javascript">
<!--
function setMenuItem(val) {
   var obj_select = document.getElementsByName('test2')[0];
   var arr = new Array();
   var arr_count = new Array(); // 配列の各項目の項目数を覚えておく
<%
' 二次元配列の初期化を行う
Do While Not rs.EOF
   strValueA = rs("項目A")
%>
   arr['<%=strValueA%>'] = new Array();
   arr_count['<%=strValueA%>'] = 0;
<%
   rs.movenext
Loop
'
Do While Not rs2.EOF
   strValueA = rs2("項目A")
   strValueB = rs2("項目B")
%>
   arr['<%=strValueA%>'][arr_count['<%=strValueA%>']++] = '<%=strValueB%>';
<%
   rs2.movenext
Loop
%>
   // arr[val][]からoption要素を追加
   itemNum = arr[val].length;
   for (var i=0; i<itemNum; i++ ) {
   }
}
// -->
</script>

<SELECT name="test"
onChange="setMenuItem(this.options[this.selectedIndex].value)">
   <option></option>
</select>
<SELECT name="test2">
   <option></option>
</select>

あと、テーブルを正規化していないのはなぜでしょうか。
この場合、一つのテーブルをgroup byを使うのではなく、
テーブルXの他にもう一つ項目Aを主キーにしたテーブルを作成するのが普通です。


7:[完了] マーチ [2004/03/08 13:39 ]

色々とご教示ありがとうございます。
配列について理解が足りないようで、戸惑ってしまいました。
結局今回は、1つ目のセレクトボックス選択した時に、ページを呼びなおして再度SQL文を実行する方法になりました・・・
が、セレクトボックスが増えた時を考えて、勉強させていただきます。ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World