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のメニューが初期の
表示メニューに戻したいのですが、どう変えればよいでしょうか。

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

A 回答 (2件)

こんにちは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); // 追加
}

こんな感じでいかがでしょうか? 同じ処理になるよう共通化しました。
注)全部を貼り付けても動きません。追加のところだけ張付けてくださいね。
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2001/10/26 16:08

こんにちは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;}

補足日時:2001/10/26 13:49
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

今、見られている記事はコレ!

おしトピ編集部からのゆる~い質問を出題中

お題をもっとみる


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ