セレクトメニューの連動 multipleについて

質問

複数選択の場合の方法がわからずに困っております。
ご教授くださいますようお願い申し上げます。

大項目Aというセレクトメニューがあり、選択項目が40コ程あります。
たとえば、Aのセレクトメニューの項目「靴」が選択されたら、

「靴」に関連する中項目のセレクトメニューがON（選択可能）になるといった感じで設置しております。
30コ程のセレクトメニューがあります。

下記がjavascriptの中身です。

function selectChange() {
var selectedNum = document.score.cate1.selectedIndex;
if(selectedNum == 01 | selectedNum == 02 | selectedNum == 03 | selectedNum == 04 | selectedNum == 05 | selectedNum == 06 | selectedNum == 07 | selectedNum == 08 | selectedNum == 09 | selectedNum == 10 | selectedNum == 11) {
document.score.co1.disabled = false;
document.score.co1.style.backgroundColor='#ffffff';
} else {
document.score.co1.disabled = true;
document.score.co1.style.backgroundColor='#efefef';
}
}

function selectChange2() {
var selectedNum = document.score.cate1.selectedIndex;
if(selectedNum == 01 | selectedNum == 02 | selectedNum == 03 | selectedNum == 04 | selectedNum == 05 | selectedNum == 06 | selectedNum == 07 | selectedNum == 08) {
document.score.so.disabled = false;
document.score.so.style.backgroundColor='#FFFFFF';
} else {
document.score.so.disabled = true;
document.score.so.style.backgroundColor='#EFEFEF';
}
}

function selectChange3() {
var selectedNum = document.score.cate1.selectedIndex;
if(selectedNum == 09) {
document.score.bl1.disabled = false;
document.score.bl1.style.backgroundColor='#FFFFFF';
} else {
document.score.bl1.disabled = true;
document.score.bl1.style.backgroundColor='#EFEFEF';
}
}

今まではこれで問題なく動いていましたが、
今回大項目Aを複数選択できるようにしました。
「靴」と「服」を選択した場合、
靴と服に関連する中項目をONにしたいのですが、先頭の「靴」のみしかONになりません。
いろいろ調べたのですが、さっぱりわからず困っております。

知識が少ないので、ご迷惑をおかけいたしますが宜しくお願いいたします。

回答No.2

leap_day · ベストアンサー

こんにちは

30個optionを書くの面倒だったので自動作成させてますのでwindow.onload＝function(){ }は忘れてください
function op(){ }の部分が質問の回答になるかと思います

セレクトメニューで『0』『12』『28』を選択すると左のセレクトメニューが
『1』『18』を選択すると右のセレクトメニューが選択可能になり
それ以外を選択すると選択不可能になります
Ctrl+クリックで複数選択可です
IE6.0でしか機能確認はしていませんので他のでできなかったらごめんなさいｍ（－－）ｍ

<SCRIPT language="JavaScript">
<!--
window.onload=function(){
obj0=document.form.s0;
obj1=document.form.s1;
obj2=document.form.s2;

for(j=0; j<30; j++) {
obj0.options[j] = new Option(j);
obj1.options[j] = new Option(j);
obj2.options[j] = new Option(j);
}
}
//-->
<!--
function op() {
obj=document.form.s0;
if(obj.options[0].selected | obj.options[12].selected | obj.options[28].selected){ document.form.s1.disabled = false; }
else{ document.form.s1.disabled = true; }
if(obj.options[1].selected | obj.options[18].selected ){ document.form.s2.disabled = false; }
else{ document.form.s2.disabled = true; }
}

/-->

</SCRIPT>

<form name="form">
<select name="s0" multiple size="5"></select>
<input type="button" value="open" onclick="op()">
<select name="s1" disabled></select>
<select name="s2" disabled></select>
</form>

お礼

ご返事が大変遅くなり申し訳ございません！

ご丁寧に記述いただいたおかげで、思い通りの結果を得られました！！
本当に有難うございます！！

すごく助かりました。
有難うございました！

回答No.1

yambejp

selectedIndexで得られるのは先頭のインデックス番号のようです。
multipleを処理するのであれば、すべてのオプションをしらべて
selectedされていれば処理をいれるようにすべきでしょう。

サンプル：
<script language="javascript">
function test(f){
var cate1=f.cate1;
for(var i=0;i<cate1.length;i++){
if(cate1[i].selected) alert(cate1[i].value)
}
}
</script>
<form>
<select name="cate1" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<input type=button value="チェック" onClick="test(this.form)">
</form>

お礼

早速のご回答を有難うございます。

サンプルを試してみると、複数選択でも確かにアラートが出ていました。
これを、少し変えて複数選択で値を渡すようにすればいいのは理解できるのですが、色々さわってみても思ったような動作をしてくれません。

丁重にサンプルまで頂いたのに、理解不足（知識不足）で申し訳ございません。

まず、
function test(f){
var cate1=f.cate1;
for(var i=0;i<cate1.length;i++){
if(cate1[i].selected) alert(cate1[i].value)
}
}
をどの部分に追加すればよいでしょうか？

もう、ほんとに申し訳ございません・・・