フレームを使ったプルダウンメニューの実装方法

2023/07/29 17:20

このQ&Aのポイント

JavaScriptを使用してフレーム内のプルダウンメニューを実装する方法について教えてください。
画像ボタンを使用してプルダウンメニューの項目を選択した際、選択された項目が表示されたままにならない問題についても解決策を教えてください。
プルダウンメニューを使用したフレームのレイアウトを実現するための最適な方法についてもアドバイスをいただけますか。

ベストアンサー

フレームを使ったプルダウンメニュー

2004/07/07 22:48

フレームで「ヘッダー・左メニュー・右メインページ」というように３分割にし、左メニューに置いたプルダウンから項目を選ぶと右メインに表示される、という構造にしたいと思っています。 <HEAD>～</HEAD>内↓ <script language="JavaScript"> function jump(form) { var myindex=form.destination.selectedIndex window.open(form.destination.options[myindex].value, target="main"); } //--> </SCRIPT> プルダウン部分↓ <FORM NAME="form"> <SELECT NAME="destination"> <OPTION VALUE="a.html" SELECTED>あ</OPTION> <OPTION VALUE="k.html">か</OPTION> <OPTION VALUE="s.html">さ</OPTION> <OPTION VALUE="t.html">た</OPTION> <OPTION VALUE="n.html">な</OPTION> </SELECT> <INPUT TYPE="image" SRC="go.gif" onClick="jump(this.form)" BORDER="0"> </FORM> という様に記述した所、例えばプルダウンで「た」を選択した場合、右フレームにちゃんとt.htmlが表示されるのですが、左フレームのプルダウンの項目が「あ」に戻ってしまいます。「た」を選択した状態のまま残したいのですが。ちなみにボタンに画像を使わず、<INPUT TYPE="button" ・・・・>にするとなぜか「た」選択の状態でちゃんと残ります。でも、できれば画像を使いたいのです。うまいやり方をご存じの方は、教えていただけますか。おねがいします。

pandaman0_0
お礼率100% (1/1)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

randman
ベストアンサー率51% (17/33)

2004/07/08 11:57 回答No.1

画像とボタンの違いに原因があると思います。・画像ボタンは… 　TYPE="submit"と同じ機能があります。たぶん(ー"ー;) 　つまり、押すと送信される（ページがリロードされる）ので、その結果、プルダウンが先頭の項目に戻ってしまいます。・ただのボタンは… 　押しても送信はされませんので、ページもリロードされません。だからプルダウンにも変化なし。憶測でモノ言って申し訳ないのですが、解決策としては、画像ボタンを単なる画像（IMG）にしてやればよろしいかと。

質問者

お礼 2004/07/08 17:37

ボタンを画像扱いにしてたところ、うまくできました！こんなに早く解決するなんて～ほんとうに助かりました。ありがとうございます！！

関連するQ&A

プルダウンメニュー
　以下のプログラムですが！仕様が二分割の縦分割フレームが特徴です。　左側フレームにリンクタグがあり、そのリンクタグをクリックすると、右フレームに HPが観れるようになっています。　しかし、プルダウンメニューのYahooをクリックしたらakkotyan.html、は左フレームになぜか出てきてしまって困っています。　それともう１つ、プルダウンメニューのhouyhnhnmsをクリックしても何もフレームに出てこなくて無反応です？　そのほか　　「クリックで動くプログラ」と「知恵袋竹島問題」はちゃんと右フレームに出てきて　問題ありません。　　プルダウンメニュータグのHPを右フレームに出すにはどうしたらできますか！？　宜しくお願いします。 -------------------------------------------------------- 左フレーム <html> <head> </head> <frameset cols="26%,*"> <frame src="left.html"name="menu"> <frame src="pronagare.html"name="contents"> </frameset> <html> ------------------------------------------------------- 右フレーム <html> <HTMl> <HEAD> <TITLE>プルダウンメニューのHPを右フレームへ表示したい</title> <script>addEventListener('load',function(ev){ document.forms['jump'].elements['to'].addEventListener('change',function(ew){ var map = { yahoo: './akkotyan.html', houyhnhnms: 'http://google.com/search?tbm=isch&q=houyhnhnms' }; var url = map[ew.target.value]; if (url) window.location = url; },false); },false)</script> <body> <form name=jump><select name=to> <option value='' selected>-</option> <option value=yahoo>Yahoo</option> <option value=houyhnhnms>Houyhnhnms</option> </form> </select> <P> <a href="pronagare.html"target="contents">クリックで動くプログラム</a><br> <a href="takesima.html"target="contents">知恵袋竹島問題</a><br> </body> </html>
- ベストアンサー
- JavaScript
フレームのあるHPでプルダウンメニュー
上左右とフレームの切ってあるHPをビルダーで作っている者です。似た感じの質問を過去ログから検索して読みましたが、質問させてください。左フレームにプルダウンメニューを設置して、プルダウンメニューをクリックすると右メインページが切り替えれる様にしたいのです。 http://www.red.oit-net.jp/tatsuya/java/combobo2.htm←この様なプルダウンメニューを設置したいのですが、フレーム切り替えのタグをどこをどういじっていいのかわかりません。現在ローカルファイルで作成中で、フォルダに上フレーム：flame1.htm（完成）左フレーム：flame2.htm（←ここに設置したい）メインページ：1.htm 2.htm 3.htm 4.htm 　と入っている感じです。左フレーム↓ <script language="JavaScript"></script> <form name="myForm"> <select name="myMenu" onChange="myGo()"> <option value="1.htm" >第1章 <option value="2.htm" >第2章 <option value="3.htm" >第3章 <option value="4.htm" >第4章 </select> </form> どこをどう直したらいいのか、是非お教え下さい。よろしくお願いします。
- ベストアンサー
- JavaScript
フレームを使用した複数プルダウンメニュー
こんにちは。よくある質問もみたのですが「複数のプルダウンメニュー」「フレームを使ったプルダウン」というのはあるのですが、フレームを使用して左フレームに複数プルダウン、そこで選んだものを右フレームに表示させるというのが見つかりませんでした。「複数のプルダウンメニュー」もつくれますし、「別フレームに表示させる」こともできるのですが、プルダウンを増やしたとたんに動きません。ネームを変えてもみたのですがうまくいきません。フレームを二つつくって <FRAMESET cols="35%,65%"> <FRAME src="n_menu.htm" name="manu">←こっちにプルダウンメニュー <FRAME src="n_main.htm"name="main">←こっちに表示目次のhtmファイルで <SCRIPT LANGUAGE="JavaScript"> function openPage() { var list = document.forms[0].urlList; parent.frames[1].location = list.options[list.selectedIndex].value; } </SCRIPT> </HEAD> <FORM> <SELECT NAME="urlList" onChange="openPage()"> <OPTION SELECTED VALUE="cover1.htm">朝の歌 <OPTION VALUE="1.htm">1番目のページ <OPTION VALUE="2.htm">2番目のページ <OPTION VALUE="3.htm">3番目のページ </SELECT> </FORM> #上記をコピペして増やしてみた↓ <FORM> <SELECT NAME="urlList2" onChange="openPage()"> <OPTION SELECTED VALUE="cover2.htm">夜の歌 <OPTION VALUE="4.htm">4番目のページ <OPTION VALUE="5.htm">5番目のページ <OPTION VALUE="6.htm">6番目のページ </SELECT> </FORM> これだと２本目が表示されません。どうすればいいか教えていただけないでしょうか？
- ベストアンサー
- JavaScript
複数のプルダウンメニューから指定フレームへ表示
質問内容を検索してhttp://omedeta.okweb.jp/kotaeru.php3?q=1205107 から抜粋させていただきました。 funfun31様、ご回答された方々、まこと申し訳ございません。ありがとうございます。現状、上部(固定)、左フレーム(プルダウン設置)、右フレーム上（表のサンプル表示）、右フレーム下（メインページ）というページの構成でfunfun31様とほとんど同じです。上フレーム（完成）左フレーム（↓のJavaScriptを設置）右フレーム上（右フレーム下へ表示する表の見方）右フレーム下（ここにプルダウンメニューで選択した内容表示）左フレームの内容 <HTML> <HEAD> <script kanguage=Javascript"> <!-- function myGo(myPullDown) { 　　var mySelect = myPullDown.selectedIndex; 　　parent.右フレーム下ファイル名.location.href = myPullDown.options[mySelect].value; </script> <body background="壁紙"> <form name="myForm"> 題名１<br> <select name="myMenu1" onChange="myGo(this)"> <option selected>選択 <option value="01.htm">01 <option value="02.htm">02 <option value="03.htm">03 </select> <br> 題名２<br> <select name="myMenu2" onChange="myGo(this)"> <option selected>選択 <option value="04.htm">04 <option value="05.htm">05 <option value="06.htm">06 </select> </form> </body> </html> どこが間違っているのかがわかりません。現状選択しても右フレーム下に反応がありません。知識不足で単純な見落とし、または根本的な間違いがあるかも知れません。無知でまこと申し訳ございませんが是非ご回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
複数のプルダウンメニューの設置（左右フレーム）
前回プルダウンメニューによる左右フレーム切り替えの質問をさせていただきました。 →http://oshiete1.goo.ne.jp/kotaeru.php3?q=1200405 申し訳ないですが、ここからまた新たに質問させてください。上部(固定)、左フレーム(プルダウン設置)、右フレーム（メインページ）というページを作っています。現在の状況はローカルのフォルダの中に ○上フレーム：flame1.htm（完成） ○左フレーム：flame2.htm（←ここに設置したい） ○右メインページ：1.htm 2.htm 3.htm（←１つ目プルダウン）4.htm 5.htm 6.htm（←２つ目のプルダウン） 7.htm 8.htm 9.htm（←３つ目のプルダウン）　と入っている感じです。 <HEAD>～<HEAD>部分 <script language="JavaScript"></script> <BODY>～<BODY>部分 <form name="myForm"> <select name="myMenu" onChange="myGo()"> <option value="1.htm" >第1章 <option value="2.htm" >第2章 <option value="3.htm" >第3章 </select> </form> ↑上記でひとつのプルダウンは設置できるのですが、２つ目、３つ目のプルダウンの設置となると、どこをどうしたらよいやらわかりません。是非ご回答よろしくお願いいたします。
- ベストアンサー
- JavaScript
プルダウンメニューからインラインフーム内を操作する
表題のようなものをjavascriptとフォームを使って用意しましたが、IE6、IE7の環境で試験しましたが問題ありませんでした。ところが、これをFirefoxで動かすと、プルダウンで選択してもインラインフレームはまったく変化しませんでした。どちらでも動作するようにしたいのですがどのように改変すればよろしいでしょうか。初心者でとんでもない間違いをしているかもしれませんが、どうかご教授ください。現在以下のような記述になっていますインラインフレーム名：inpage  <script type="text/"> function jump(){ var url=document.form1.select1.options[form1.select1.selectedIndex].value; if (url!="") document.inpage.location.href = url; } </script>   <FORM NAME="form1"> <SELECT NAME="select1" onChange="jump()"> <option value="">選択してください <option value="AAAAA.html">AAAAA <option value="BBBBB.html">BBBBB <option value="CCCCC.html">CCCCC </SELECT> </FORM> 
- 締切済み
- JavaScript
プルダウンメニューのリンクで別ウインドウを開く
下記のようなプルダウンメニューを作成したのですが、同じウインドウ内でリンクするのではなく別ウインドウで開くようにするにはどこを変更すればよいのでしょうか？ head内>>>>>>>>>>>>> <script language="JavaScript" type="text/JavaScript">  </script> body内>>>>>>>>>>>>>> <form name="fm0"> <select name="links"> <option selected>＜ここから選択してください＞</option> <option value="aaa.html">あああ</option> <option value="bbb.html">びびび</option> </select> <input name="BUTTON" TYPE=BUTTON onClick="gotoURL('fm0')" VALUE="GO!"></form>
- ベストアンサー
- グラフィックソフト
プルダウン＆キーワードで
こんにちは。こんな検索窓を作りたいと思っています。 __________________________　　 _______________ |__________________________|▼　|_______________|　検索　　　　↑　　　　　　　　　　　　↑　　プルダウンで選択　　　　キーワードを入力プルダウンでカテゴリを選択し、その中から[A]を探したいというものです。例えば、このような記述 <FORM ACTION="jump.cgi"> <SELECT NAME="jumpto"> <OPTION VALUE="-" SELECTED>カテゴリを選択</OPTION> <OPTION VALUE="page1.html">Page1</OPTION> <OPTION VALUE="page2.html">Page2</OPTION> <OPTION VALUE="page3.html">Page3</OPTION> </SELECT> <INPUT TYPE="submit" VALUE="検索"> </FORM> ________________　 |________________|▼　検索のように、カテゴリのみになってしまいますよね。プルダウン＋キーワードで検索するにはどのような記述をしたら良いでしょうか？宜しくお願い致します！
- ベストアンサー
- CGI
【プルダウンメニュー】フレームの中のインラインフレームに、ターゲットを指定するには？
現状は【フレームA（ヘッダー1）】【フレームB（ヘッダー2）】【フレームC（メイン）】【フレームD（フッター）】の4分割のうえに、更にフレームCの中に【インラインフレーム】があります。フレーム3の中にプルダウンメニューを設置し、インラインフレームに表示させたいのですが上手く動作しません。 ※ちなみに、「var target = "フレームA名";」で試してみると動作はするのですが…。という事は「フレームの中のインラインフレーム」という点がネックなのでしょうか？とあるソースを改良して使おうと思ったのですが、javascript素人につき行き詰まっています。どなたか回答いただけると嬉しいです。 <SCRIPT TYPE="text/javascript">  </SCRIPT> <FORM NAME="form1"> <SELECT NAME="select" onChange="jump()"> <option value="">お選びください <option value="Ahtml/arr">AAA <option value="B.html">BBB <option value="C.html">CCC <option value="D.html">DDD <option value="E.html">EEE </SELECT> </FORM>
- ベストアンサー
- JavaScript
HTML内の指定の位置にプルダウンを読み込みたい
まずラジオボタンがあって、選択するとfunctionに格納してあるプルダウンをラジオボタンの下の指定した箇所に表示させたいです。ラジオボタンを変更すると、プルダウンも変わるようにしたいです。教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ１ <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ２ </FORM></BODY> </HTML>
- ベストアンサー
- JavaScript