複数プルダウンでメニューを初期表示に戻したい

質問

No.157334でleaz024さんに「複数プルダウンメニュー」について教えてもらったものですが、ひとつ、追加したいことがあるので教えてください。

教えていただいたスクリプトは
<script language="javascript">
<!--
function A_Li() {
　　Sel=document.Link1.OP.selectedIndex;
　　Ms=document.Link1.OP.options[Sel].value;
　　parent.main.location.href=Ms;}
function B_Li() {
　　Sel=document.Link1.OP2.selectedIndex;
　　Ms=document.Link1.OP2.options[Sel].value;
　　parent.main.location.href=Ms;}
// -->
</script>

<FORM name="Link1">
<SELECT name="OP" onChange="A_Li()" size="1">
<OPTION Value="main.htm" SELECTED>ページを選んでください
<option value="main.htm">ぺージ1</option>
<OPTION Value="abc.htm">ページ2
<OPTION Value="def.htm">ページ3
</SELECT>

<SELECT name="OP2" onChange="B_Li()" size="1">
<OPTION Value="aaa.htm" SELECTED>ページを選んでください
<option value="bbb.htm">ぺージ1</option>
<OPTION Value="ccc.htm">ページ2
<OPTION Value="ddd.htm">ページ3
</SELECT>

です。

例えば
OP2のメニューをクリックしたあと
OP3のメニューをクリックしたときにOP2のメニューが初期の
表示メニューに戻したいのですが、どう変えればよいでしょうか。

初心者なので本を見てみたのですがわかりませんでした。
どうぞよろしくお願いいたします。

回答No.2

xruz · ベストアンサー

こんにちはshizukuさん、xruzです、やはりはずしていましたね(=.=;

<script language="javascript">
<!--
// ここから追加
var s;
function reSel(c) {
if(s&&(s!=c)) s.options[0].selected=true;
s=c;
}
// ここまで追加
function A_Li() {
　　Sel=document.Link1.OP.selectedIndex;
　　Ms=document.Link1.OP.options[Sel].value;
　　parent.main.location.href=Ms;
reSel(document.Link1.OP); // 追加
}
function B_Li() {
　　Sel=document.Link1.OP2.selectedIndex;
　　Ms=document.Link1.OP2.options[Sel].value;
　　parent.main.location.href=Ms;
reSel(document.Link1.OP2); // 追加
}
function C_Li() {
　　Sel=document.Link1.OP3.selectedIndex;
　　Ms=document.Link1.OP3.options[Sel].value;
　　parent.main.location.href=Ms;
reSel(document.Link1.OP3); // 追加
}
function D_Li() {
　　Sel=document.Link1.OP4.selectedIndex;
　　Ms=document.Link1.OP4.options[Sel].value;
　　parent.main.location.href=Ms;
reSel(document.Link1.OP4); // 追加
}
function E_Li() {
　　Sel=document.Link1.OP5.selectedIndex;
　　Ms=document.Link1.OP5.options[Sel].value;
　　parent.main.location.href=Ms;
reSel(document.Link1.OP5); // 追加
}
function F_Li() {
　　Sel=document.Link1.OP6.selectedIndex;
　　Ms=document.Link1.OP6.options[Sel].value;
　　parent.main.location.href=Ms;
reSel(document.Link1.OP6); // 追加
}

こんな感じでいかがでしょうか？　同じ処理になるよう共通化しました。
注）全部を貼り付けても動きません。追加のところだけ張付けてくださいね。

お礼

xruzさん、ありがとうございました！
思った通りに動きました。感動。。。

詳しく記述していただいて本当に助かりました。

回答No.1

xruz

こんにちはshizukuさん、xruzです。
初期の表示メニューへ戻すわけではありませんが指定したoptionsを
表示するようにするには以下のように一行追加してください。
（はずしてますでしょうか？）

function B_Li() {
Sel=document.Link1.OP2.selectedIndex;
Ms=document.Link1.OP2.options[Sel].value;
parent.main.location.href=Ms;
document.Link1.OP.options[0].selected=true; // この行を追加しました。
}

がんばってくださいね。

補足

早速のご回答をありがとうございます！
おかげさまでAとBは動かすことができました。

ただ、、、
3つめ（function C）からの記述がどう応用したらよいかわかりません。
どのメニューをクリックしてもすべて（直前にクリックした表示）を初期値に戻すことができますか？
本当にお手数ですが、教えてください。。

<script language="javascript">
<!--
function A_Li() {
　　Sel=document.Link1.OP.selectedIndex;
　　Ms=document.Link1.OP.options[Sel].value;
　　parent.main.location.href=Ms;
document.Link1.OP2.options[0].selected=true;}

function B_Li() {
　　Sel=document.Link1.OP2.selectedIndex;
　　Ms=document.Link1.OP2.options[Sel].value;
　　parent.main.location.href=Ms;
document.Link1.OP.options[0].selected=true;}

function C_Li() {
　　Sel=document.Link1.OP3.selectedIndex;
　　Ms=document.Link1.OP3.options[Sel].value;
　　parent.main.location.href=Ms;}
function D_Li() {
　　Sel=document.Link1.OP4.selectedIndex;
　　Ms=document.Link1.OP4.options[Sel].value;
　　parent.main.location.href=Ms;}

function E_Li() {
　　Sel=document.Link1.OP5.selectedIndex;
　　Ms=document.Link1.OP5.options[Sel].value;
　　parent.main.location.href=Ms;}
function F_Li() {
　　Sel=document.Link1.OP6.selectedIndex;
　　Ms=document.Link1.OP6.options[Sel].value;
　　parent.main.location.href=Ms;}