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ベストアンサー
- 回答日時:
こんにちは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); // 追加
}
こんな感じでいかがでしょうか? 同じ処理になるよう共通化しました。
注)全部を貼り付けても動きません。追加のところだけ張付けてくださいね。
No.1
- 回答日時:
こんにちは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;}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
SafariのIframeで高さが取得で...
-
クリッカブルマップのリンク部...
-
javascriptの基本的なことだと...
-
Null またはオブジェクトではあ...
-
DOM要素を削除しても、イベント...
-
Javascriptで定期的にF5を押す...
-
IE操作で別タブ表示のHTMLソー...
-
乗換案内 VBAで操作したい
-
TEXTAREA内の改行位置をinnerHT...
-
チャットフォームで文字色をラ...
-
このjavascriptのif文、条件式...
-
背景ランダム
-
選択によってsubmitボタンの色...
-
LaTeX:数式を等号揃えにする方法
-
functionから別のfunctionを実...
-
javascriptで自動計算フォーム...
-
日本語入力の禁止
-
URLの一部をコピーできるブック...
-
関数でy=g(x)のgとは何の略です...
-
google apps scriptの終了のさせ方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
このjavascriptのif文、条件式...
-
FireFoxのjavascriptで自動でキ...
-
DOM要素を削除しても、イベント...
-
javascriptの基本的なことだと...
-
文字を一文字ずつ表示
-
showModalDialogで開いた画面を...
-
Null またはオブジェクトではあ...
-
Javascriptのhtml出力についてa...
-
codejump 模写コーディングgall...
-
LaTeX:数式を等号揃えにする方法
-
javascriptのdocument.allにつ...
-
excle VBA とweb上の検索を利用...
-
Latexに関する質問です。
-
乗換案内 VBAで操作したい
-
JavaScriptのdocument.all("変...
-
Javascriptで定期的にF5を押す...
-
選択によってsubmitボタンの色...
-
スマホでフォームにフォーカス...
-
compatModeとは?
おすすめ情報