selectタグの項目を制御する

質問

フォーム内のプルダウンの項目を制御する方法がわからなくて困っています。
form1というフォーム内にプルダウンが3つあります。
<select name="select_1">
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="CCC">CCC</option>
</select><br/>
<select name="select_2">
<option value="AAA_1">AAA_1</option>
<option value="AAA_2">AAA_2</option>
<option value="BBB_1">BBB_1</option>
<option value="CCC_1">CCC_1</option>
</select><br/>
<select name="select_3">
<option value="AC">AC</option>
<option value="AB">AB</option>
<option value="B_1">B_1</option>
<option value="B_2">B_2</option>
<option value="B_3">B_3</option>
</select><br/>
●まず、select_1がAAAなら、select_2でAAA_1とAAA_2のみ選択できるようし、select_2で、AAA_1が選択されたらselect_3にACをAAA_2が選択されたらABを表示。
●select_1でBBBが選択されたら、select_2にBBB_1のみを表示し、変更不可にする。そして、select_3にABC,B_1,B_2,B_3を表示。
●select_3でCCCが選択されたら、select_2にCCC_1のみを表示して変更不可にし、select_3にACのみを表示して変更不可にする。

こんな感じにしたいのですが、どうもうまく出来ません。
考えたのは、各selectタグにonchange=change_1(form1)として、関数を呼び出し、
no= form1.select_1.selectedIndex;
noが0なら
thisForm.select_2.length = 2; //オブジェクトを2にする
thisForm.select_2.options[0].value = "AAA_1";
の様にしたのですが、はじめに表示したoptionを消したりする方法や変更不可にする方法ってあるんでしょうか？また、ほかの方法など、どなたかわかる方がいましたら、よろしくお願いいたします。

回答No.1

BLUEPIXY · ベストアンサー

SELECT エレメントは、DISABLE には、できても変更不可というのはできないように思います。
変更不可（？）の場合、１つのOPTION を除いて他の全てを削除するというようなことで実質ＯＫじゃないかと思います。
OPTION の削除については、
最近の私の回答で言えば
http://okwave.jp/kotaeru.php3?q=2170203
の様な感じで削除できます。

補足

回答ありがとうございます。変更不可はdisableで構わないのですが、selectエレメントにdisableを加えるには、どうしたらよいのでしょうか？

回答No.5

BLUEPIXY

#3補>横幅が変動してしまうのですが、サイズを指定することはできますか？
<select style="width:100px">
とかstyle または、CSS で指定可能だと思います。

お礼

ありがとうございます。
とても助かりました。

回答No.4

NTJ

<SCRIPT>
var objDat=new Array();
objDat['AAA']=['AAA_1','AAA_2'];
objDat['BBB']=['BBB_1'];
objDat['CCC']=['CCC_1'];

objDat['AAA_1']=['AC'];
objDat['AAA_2']=['AB'];
objDat['BBB_1']=['AB','B_1','B_2','B_3'];
objDat['CCC_1']=['AC'];

function mkSelect1(val){
var strHTML='<select name="select_2" onchange="mkSelect2(this.value);">';
if(typeof objDat[val]!='object') return;
for(var i in objDat[val]){
strHTML+='<option value="'+objDat[val][i]+'">'+objDat[val][i]+'</option>';
}
document.getElementById("area2").innerHTML=strHTML;
mkSelect2(objDat[val][0]);
}

function mkSelect2(val){
var strHTML='<select name="select_3">';
if(typeof objDat[val]!='object') return;
for(var i in objDat[val]){
strHTML+='<option value="'+objDat[val][i]+'">'+objDat[val][i]+'</option>';
}
document.getElementById("area3").innerHTML=strHTML;
}

</SCRIPT>
<SPAN id="area1">
<select name="select_1" onchange="mkSelect1(this.value);">
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="CCC">CCC</option>
</select></SPAN><br/>
<SPAN id="area2">
<select name="select_2" onchange="mkSelect2(this.value);">
<option value="AAA_1">AAA_1</option>
<option value="AAA_2">AAA_2</option>
</select></SPAN><br/>
<SPAN id="area3">
<select name="select_3">
<option value="AC">AC</option>
</select></SPAN><br/>

各SELECTエレメントをSPANタグで囲って、上位のSELECTのonchangeハンドラで、そっくり書き換えをしちゃってます。
SPANを使うかDIVを使うかは条件次第、ですね。
デフォルトのoption構成は、最上位置のものが選択された状態としています。
かなり荒っぽいやり方ですが、結構安定して動作してくれます。

但しこの場合、optionのvalue値と表示内容が異なるなら、もぉちょっと工夫が必要にはなりますね。

他の手法としては、style="display:none;" を駆使する手もありますね。
表示が巨大な場合には、そちらのほうが高速に動作するかもしれません。

補足

回答ありがとうございます。
連想配列も考えたのですが、ご指摘の通り、実際はoptionのvalue値と表示内容が異なるんです。
なので、value値の配列、表示textの配列を各selectごとに作成して、onchangeハンドラで配列のデータをoptionのvalue値にしてみました。

連想配列の使い方は、あまり分からないので勉強してみたいと思います。ありがとうございました。

回答No.3

BLUEPIXY

#2>hiddenでセットして、送信するようにしようと考えています。
なるほど、一般的かどうかとかより、やりたいようにするのが良いと思いますが
＃１でも言ってますが内容が１つのSELECTだったら必然的に変更不可なのでわざわざ別に準備する必要もないような気がします。

補足

回答ありがとうございました。
お陰で理想の形になってきました。
できれば、もう一つ教えてください。

selectの各option項目の横幅なのですが、選択項目が変わるごとに
横幅が変動してしまうのですが、サイズを指定することはできますか？
<select ・・・・ size="25">だと、縦サイズになってしまって。。。
横幅は見たところ、option項目の最大幅で表示されるのですが、出来れば揃えたいので、ご存知でしたらお願いします。

回答No.2

BLUEPIXY

#1>selectエレメントにdisableを加えるには、どうしたらよいのでしょうか？

セレクトオブジェクト.disabled=true;

で良いです。
disable になっているフォームは、送信されないような気がしますが、本当にそれでいいんでしょうか？

補足

もう一つformをsubmit用に作成し、javascriptで始めのform内のselectの値をhiddenでセットして、送信するようにしようと考えています。
おかしいですかね？あまり一般的ではないですか？
javascript初心者なので、最前の方法というのが分からなくて。。。