JavaScriptでのセレクトボックスの作成について

開発環境はASP(ASP.NETでは無いです), SqlServerです。

実現したい処理としてはサーバーにある、親子関係の大分類マスタと中分類マスタより、セレクトボックス(HTMLで記載する際の<Select>タグで作成する物)を作成し、大分類マスタのセレクトボックスが変更されると、中分類マスタのセレクトボックスの値が変わる（画面の再描写は無し）という事をしたいと思っています。

こういった場合どのように記載すれば、実現することが可能でしょうか？


ASPでのソースの書き方を正直まだ理解できていませんので、バカな質問かもしれませんがよろしくお願い致します。

No.2 ベストアンサー 回答者： _pipi_ 回答日時： 2009/02/26 10:02

こんなのじゃだめかなぁ～？

<select id="a"></select>
<select id="b"></select>

<script type="text/javascript">
//@cc_on

var a_val = [0,1,2];
var a_txt = ['A','B','C'];

var b_val = [ [0,1,2],[0,1,2],[0,1,2] ];
var b_txt = [ ['A0','A1','A2'],['B0','B1','B2'],['C0','C1','C2']];

window.onload=function(){
setSelectOption('a',a_txt,a_val);
setSelectOption('b',b_txt[0],b_val[0]);
document.getElementById('a').onchange = function() {
setSelectOption('b',b_txt[this.value],b_txt[this.value],0);
}
}

function setSelectOption( elementId ,text_array, value_array, default_value, selected_value){
var element = ( typeof( elementId ) == 'string' )?
document.getElementById( elementId ) || document.getElementsByName( elementId )[0]: elementId;
while ( element.hasChildNodes() ) element.removeChild( element.lastChild );
for (var i=0, mx = text_array.length; i<mx; i++){
var n = new Option( text_array[i], value_array[i],(default_value==value_array[i]),(selected_value==value_array[i]));
element.add( n/*@if(0) */, null /*@end@*/);
}
}
</script>

No.1 回答者： Hardking 回答日時： 2009/02/25 23:52

中分類タグの選択肢をオプションオブジェクトで動的に作成します。

<SCRIPT type="text/javascript">
<!--
function resetChild() {
var idx = document.frmMAIN.CMB_LARGE.selectedIndex;
var large = document.frmMAIN.CMB_LARGE.options[idx].value;

switch (large) {
case "A" :
document.frmMAIN.CMB_MIDDLE.length = 3;
document.frmMAIN.CMB_MIDDLE.optios[0] = new Option("A111","A111");
document.frmMAIN.CMB_MIDDLE.optios[1] = new Option("A222","A222");
document.frmMAIN.CMB_MIDDLE.optios[2] = new Option("A333","A333");
break;
case "B" :
document.frmMAIN.CMB_MIDDLE.length = 4;
document.frmMAIN.CMB_MIDDLE.optios[0] = new Option("B111","B111");
document.frmMAIN.CMB_MIDDLE.optios[1] = new Option("B222","B222");
document.frmMAIN.CMB_MIDDLE.optios[2] = new Option("B333","B333");
document.frmMAIN.CMB_MIDDLE.optios[3] = new Option("B444","B444");
break;
case "C" :
document.frmMAIN.CMB_MIDDLE.length = 2;
document.frmMAIN.CMB_MIDDLE.optios[0] = new Option("C111","C111");
document.frmMAIN.CMB_MIDDLE.optios[1] = new Option("C222","C222");
break;
}
document.frmMAIN.CMB_MIDDLE.selectedIndex = 0;
}
-->
</SCRIPT>

<FORM NAME="frmMAIN">
//大分類
<SELECT NAME="CMB_LARGE" onChange="resetChild()">
<option value="A" SELECTED>A</option>
<option value="B">B</option>
<option value="C">C</option>
</SELECT>

<SELECT NAME="CMB_MIDDLE">
<option value="A111" SELECTED>A111</option>
<option value="A222">A222</option>
<option value="A333">A333</option>
</SELECT>
</FORM>