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

質問

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

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

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

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

回答No.2

noname#84373 · ベストアンサー

こんなのじゃだめかなぁ～？
<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

中分類タグの選択肢をオプションオブジェクトで動的に作成します。
<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>