親子連動型のselectを設置し、さらにselectedを設定したい。

質問

以下のソースのように、親子連動型のselectを作成しています。
ですが、特定の値にselectedを設定するところで行き詰っています。
例えば、
dai_komokuのselectedが大項目２で
chu_komokuのselectedが中２－３
というようなかたちです。

このような事は可能なのでしょうか？
可能であれば教えていただければ幸いです。

<script type="text/javascript">
<!--
function changelist(){
var num = document.forms["writeform"].dai_komoku.selectedIndex
var obj = document.forms["writeform"].chu_komoku.options
obj.length = 0

if(num==0){
obj[obj.length]=new Option("----------------","");
}
if(num==1){obj[obj.length]=new Option('中１－１','11')
obj[obj.length]=new Option('中１－２','12')
}else
if(num==2){obj[obj.length]=new Option('中２－１','21')
obj[obj.length]=new Option('中２－３','23')
}
if(obj.selectedIndex==-1)obj.selectedIndex=0
if(document.layers){
window.resizeBy(-10,-10)
window.resizeBy(10,10)
}
}
//-->
</script>
<form method="post" action="hoge.php" name="writeform">
大項目
<select name="dai_komoku" onchange="changelist()">
<option value="" selected>--選択してください--</option>
<option value='1'>大項目１</option>
<option value='2'>大項目２</option></select>
<br>

中項目
<select name="chu_komoku"></select>
</form>

回答No.2

papillon68 · ベストアンサー

RHSBEさんこんにちは、papillon68と申します。

> obj[obj.length]=new Option('中２－３','23');
の直後に

obj[obj.length-1].selected = true;

を追加すれば「中２－３」が選択状態になります。

また、最後に追加したアイテムを選択状態にするということではなく、
特定のvalue(ここでは21や23など)を選択状態にしたいという場合は
以下のようにします。

for(var i=0; i<obj.length; i++) {
if(obj[i].value == '23') {
obj[i].selected = true;
break;
}
}

少し気になったのですが、
> var num = document.forms["writeform"].dai_komoku.selectedIndex
のように文の終わりに「;」をつけていないことが多いようです。
それでも動きますが、「;」はつけた方がいいと思います。

お礼

＞特定のvalue(ここでは21や23など)を選択状態にしたいという場合
やりたいことはまさにこれでした。
for文を使うことによりうまく動作させる事ができました。
どうもありがとうございました。

回答No.3

papillon68

> if(obj.selectedIndex==-1)obj.selectedIndex=0

if(obj.selectedIndex==-1)obj.selectedIndex=0;
else obj.selectedIndex=obj.length-1;

最後のアイテムを選択状態にするだけでしたらこれで十分でした。

回答No.1

noname#18558

大項目２を選ばれたら、中項目の中２－３を選択したいってことですか？

それでしたら可能です。

if(obj.selectedIndex==-1)obj.selectedIndex=0
このあたりをいじればできると思います。

お礼

ありがとうございました。
皆さんのアドバイスのおかげで成功いたしました。