- ベストアンサー
JavaScript プルダウンメニュー選択時に同ウィンドウに表示できない。
とあるサイトを参考にしながらJavaScriptでプルダウンメニューを作成しました。が、そのサイトは別ウィンドウで表示するプログラムが書かれていたので、同ウィンドウに表示したく、書き換えてみたのですが、できませんでした（ちなみに、別ウィンドウでは開けます）。下にタグを記します。 <head> <style type="text/css"><!-- .secondpulldown { display: none; }</style> <script type="text/javascript"><!-- function AllHide() { document.getElementById('aaa').style.display = 'none'; document.getElementById('bbb').style.display = 'none'; } function SetSubMenu( idname ) { AllHide(); if( idname != "" ) { document.getElementById(idname).style.display = 'block'; } } // --></script></head> <body> <form class="firstpulldown"> 分野選択： <select onchange="SetSubMenu(value);"> <option value="" selected>分野</option> <option value="aaa">●●</option> <option value="bbb">▼▼</option> </select> </form> <form id="aaa" class="secondpulldown" onsubmit="location.href=aaasites.value;"> <select id="aaasites"> <option value="../xx/xxxx.html">○○</option> <option value="../xx/xxxxx.html">××</option> </select> <input type="submit" value="GO!"> </form> <form id="bbb" class="secondpulldown" onsubmit="location.href=bbbsites.value;"> <select id="bbbsites"> <option value="../oo/oooo.html">▽▽</option> <option value="../oo/oooo.html">△△</option> </option> </select> </form> onsubmit="location.href=aaasites.value;" の部分が書き換えたもので、本来は"window.open(aaasites.value);" としてありました。上記に示したとおり、別ウィンドウで開きたくなかったので書き換えたのですが、作動しなくなってしまったので、つきましてはアドバイスをお待ちしております。 初めての投稿ですので、至らぬ点があるかもしれません。不足点などご指摘いただければわかる範囲で補足いたします。
- pinkyx222
- お礼率100% (11/11)
- JavaScript
- 回答数7
- ありがとう数12
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
#No.5です。 onsubmitやidを引数にして関数に渡せないかと考えてみたのですが、 わからなくてとりあえず動くだけ動くように作ってみました。 inputのtype="button"に、 onclickでボタンクリックをきっかけに動かす。 に変えてあります。 Yahoo!などは動作確認の便宜上入れたものです。 これをヒントに関数にする方法があれば、 と思い再回答させていただきました。 <style type="text/css"> <!-- .secondpulldown { display: none; } --> </style> <script type="text/javascript"> <!-- var focused = null; function SetSubMenu( idname ){ if( idname != "" ){ if( focused != null ){ document.getElementById( focused ).style.display = 'none'; } document.getElementById( idname ).style.display = 'block'; focused = idname; } } //--> </script> </head> <body> <form class="firstpulldown"> 分野選択： <select onchange="SetSubMenu(value);"> <option value="" selected>分野</option> <option value="aaa">●●</option> <option value="bbb">▼▼</option> </select> </form> <form id="aaa" class="secondpulldown"> <select id="aaasites"> <option value="http://www.yahoo.co.jp/" selected>Yahoo!</option> <option value="http://www.google.co.jp/">Google</option> </select> <input type="button" value="GO!" onclick="window.location.href = this.form.aaasites.options[this.form.aaasites.selectedIndex].value;"> </form> <form id="bbb" class="secondpulldown"> <select id="bbbsites"> <option value="http://jp.msn.com/" selected>MSN</option> <option value="http://okwave.jp/">OKWave</option> </select> <input type="button" value="GO!" onclick="window.location.href = this.form.bbbsites.options[this.form.bbbsites.selectedIndex].value;""> </form> </body> </html>
その他の回答 (6)
- Hardking
- ベストアンサー率45% (73/160)
またまたＮＧでしたか・・・。 若干修正ボリュームがありますが 下記の通り修正すれば確実うまくいくと思います。 <head> <style type="text/css"><!-- .secondpulldown { display: none; }</style> <script type="text/javascript"><!-- function AllHide() { document.getElementById('aaa').style.display = 'none'; document.getElementById('bbb').style.display = 'none'; } function SetSubMenu( idname ) { AllHide(); if( idname != "" ) { document.getElementById(idname).style.display = 'block'; } } function gojump( p_type ) { var idx = -1; var url = ""; switch (p_type){ case "A" : // ＡＡＡサイト idx = document.frm_aaa.aaasites.selectedIndex; url = document.frm_aaa.aaasites.options[idx].value; break; case "B" : // ＢＢＢサイト idx = document.frm_bbb.bbbsites.selectedIndex; url = document.frm_bbb.bbbsites.options[idx].value; break; default : return; } window.location.href = url; } // --></script></head> <body> (省略) <form name="frm_aaa" id="aaa" class="secondpulldown" onchange="gojump('A')"> <select name="aaasites"> <option value="../xx/xxxx.html">○○</option> <option value="../xx/xxxxx.html">××</option> </select> </form> <form name="frm_bbb" id="bbb" class="secondpulldown" onchange="gojump('B')"> <select name="bbbsites"> <option value="../oo/oooo.html">▽▽</option> <option value="../oo/oooo.html">△△</option> </option> </select> </form>
お礼
ご回答ありがとうございました。 至らない私のために次々と修正をしていただき、その労力に報われました。 おかげさまで、#6の回答にて問題が解決しました。 たびたびご協力いただいたこと深く感謝いたします。
- zeff
- ベストアンサー率69% (137/198)
同じく横から失礼いたしします。 SetSubMenuがそのままだと選択を変えたときに前に選んだものが見えたままになるのでひとつだけにしました。 <script type="text/javascript"> <!-- var focused = null; function SetSubMenu( idname ){ if( idname != "" ){ if( focused != null ){ document.getElementById( focused ).style.display = 'none'; } document.getElementById( idname ).style.display = 'block'; focused = idname; } } //--> </script>
お礼
ご回答ありがとうございます。 スクリプトを書き換えました。ありがとうございます。
- fujillin
- ベストアンサー率61% (1594/2576)
よこからですが… ＞<form id="aaa" class="secondpulldown" ＞onsubmit="location.href=document.getElementById("aaasites").value;"> ＞と変更してみましたが、うまくいきませんでした。 ""の中に""を入れても正しく解釈されません。 <form id="aaa" class="secondpulldown" onsubmit="location.href=document.getElementById('aaasites').value;"> としてあげるとか・・・ でも、基本的に「大分類」から「小分類」を絞り込む形なので、全体で10や20種類程度であればひとつのselectに記載してしまったほうがユーザビリティは良いかも。 たくさんある場合は、このスクリプトの書き方だと分類が増減したりする度にスクリプトを書き換えなければならないのでちょっと面倒ですね。 スクリプトがOFFの場合でも動作できる、こんなの（↓）を考えている人もいます。 http://d.hatena.ne.jp/Mars/20071109 （さすがにジャンプする様には、作ってないのでそこだけ付け加える必要はありますが…）
お礼
遅くなりました。ご回答ありがとうございます。 上記修正をかけましたが、やはり問題は解決しませんでした。 ご紹介のサイトを拝見いたしました。まだ試しておりませんが、このスクリプトの修正とともに、試してみたいと思います。 また、ひとつのselectに記載することも検討してみます。
- Hardking
- ベストアンサー率45% (73/160)
ＮＧでしたか。 では、今度は下記内容で修正して再試行してください。 （省略） <form id="aaa" class="secondpulldown" onsubmit="location.href=aaasites.value;"> <select name="aaasites"> <option value="../xx/xxxx.html">○○</option> <option value="../xx/xxxxx.html">××</option> </select> <input type="submit" value="GO!"> </form> <form id="bbb" class="secondpulldown" onsubmit="location.href=bbbsites.value;"> <select name="bbbsites"> <option value="../oo/oooo.html">▽▽</option> <option value="../oo/oooo.html">△△</option> </option> </select> </form>
お礼
遅くなりました。たびたびのご回答ありがとうございました。 やはり問題は解決しません。 何が原因かわからず途方にくれております。
- Hardking
- ベストアンサー率45% (73/160)
aaasites.value、bbbsites.valueではプルダウンの選択値は取得できないと思います。 document.getElementById("aaasites").value document.getElementById("bbbsites").value に修正して再試行して下さい。
お礼
ご回答ありがとうございます。 <form id="aaa" class="secondpulldown" onsubmit="location.href=document.getElementById("aaasites").value;"> と変更してみましたが、うまくいきませんでした。
- yyr446
- ベストアンサー率65% (870/1330)
こうかけばよいかも onsubmit="hoge(aaasites.value);" <script> function hoge(fuga){ location.href=fuga; } </script>
お礼
ご回答ありがとうございます。 初心者の質問で申し訳ございませんが、 hoge、fuga には、どのような値を入れればよいのでしょうか。
お礼
ご回答ありがとうございます。 無事同ウィンドウ上での動作を確認できました。 動いた時は、思わず目頭が熱くなり、モニター上で叫んでしまいました。 本当にありがとうございました。