• 締切済み

JAVASCRIPTで別ファイルのプルダウンを表示する方法

プルダウン形式のメニューを表示して、選択すると そのページへ飛ぶ。 そんなメニューを全てのページに入れているのですが 更新の度に全てのページを変更しなければならなく、 とても手間がかかっています。 メニュー部分だけを、別ファイルにして javascriptで呼び出せるようにするにはどうしたら いいのでしょうか。 document.write('\ <form name="jump" action="./">\ <option value="#">○○ページ</option></select>\ '); 調べてみたのですが、このような表記をしたファイルを 階層毎に作る方法しかわかりませんでした。 もっと効率のいいジャバスクリプトの方法がありましたら、 教えていただけないでしょうか。

  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • abacabu
  • ベストアンサー率37% (250/663)
回答No.1

趣味でHPを作成している者です 私もちょうどフレーム脱の為色々調べていて ちょうどその内容のページを知っているので 参考に載せます。 私は趣味程度ですのでなかなか難しい感じですが、 機能は凄いと思います。 基本的には擬似フレーム作成支援的なものですが、 お探しの情報は自動生成メニューという所にあります。 組み込み方は擬似フレームに載ってます

参考URL:
http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html

関連するQ&A

  • JavaScriptのプルダウン

    プルダウンメニューの中から選択したページへジャンプするようにしたいのですがわからないところがあるので教えてください。 TOPページはframesetでmenu、TOP2の上下に分かれています。プルダウンメニューはmenuのページに置き、選択したページを表示するのは下のTOP2の部分に表示させたいんです。 下記のように記述したのですがこのままだとジャンプしたページはmenuに表示されてしまいます。 -------------------- <script Language="JavaScript"> <!-- function popJump(selOBJ) { n = selOBJ.selectedIndex; location.href = selOBJ.options[n].value; } // --> </script> </head> <body> <form> <select onChange="popJump(this)"> <option value="#">選択して下さい <option value="top2.htm">トップページ <option value="A.htm">A <option value="B.htm">B </select> </form> -------------------- <option value="A.htm">のところでTOP2へジャンプするように指定するのだと思うのですが その方法がいろいろ調べてみたのですがわかりません。 わかる方、アドバイスをお願いします。

  • 携帯サイトでプルダウンメニューを作る方法

    携帯サイトでプルダウンメニューでリンクしたいのですが作る方法がわかりません。 あるサイトのタグ作成機でプルダウンメニューを作ったのですが <FORM ACTION="."> <SELECT> <OPTION>テスト1 <OPTION>テスト2 <OPTION>テスト3 </SELECT> </FORM> て出ました。この各メニューを押すとリンク先に飛ぶようにしたのですが <FORM ACTION="."> <SELECT> <OPTION value=http://www.yahoo.co.jp/>テスト1 <OPTION value=http://www.google.co.jp/>テスト2 <OPTION value=http://jp.msn.com/>テスト3 </SELECT> </FORM> としてみましたができませんでした。どこがおかしいのでしょうか? ところで<FORM ACTION=".">のACTION="."の部分は何かいれるのでしょうか?わかりません。詳しい方教えてくださるとありがたいです ドコモやソフトバンクなど対応していない会社があるのでしょうか?

  • プルダウン&キーワードで

    こんにちは。こんな検索窓を作りたいと思っています。 __________________________   _______________ |__________________________|▼ |_______________| 検索     ↑             ↑   プルダウンで選択     キーワードを入力 プルダウンでカテゴリを選択し、その中から[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
  • プルダウンメニューのターゲット指定

    タイトルどおりなのですが、プルダウンメニュー のリンク先を同ページ内のiframeにしたいのですが これはどうすればできるのでしょうか? こちらに現在の状況を載せておきます。 <SCRIPT LANGUAGE="JavaScript"><!-- function Jump() { tu = document.f.elements['jumpto'].options[document.f.elements['jumpto'].selectedIndex].value if( tu != '-' ) { location.href = tu; } else { alert('移動先を選択して下さい。'); } } // --></SCRIPT> <FORM NAME="f"> <SELECT NAME="jumpto" onChange="Jump();">> <OPTION VALUE="-" SELECTED>移動先を選択</OPTION> <OPTION VALUE="menu1.htm" target="menu">Page1</OPTION> <OPTION VALUE="menu2.htm" target="menu">Page2</OPTION> </SELECT> </FORM> よろしくお願い致します。

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

    フレームで「ヘッダー・左メニュー・右メインページ」というように3分割にし、左メニューに置いたプルダウンから項目を選ぶと右メインに表示される、という構造にしたいと思っています。 <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" ・・・・>にするとなぜか「た」選択の状態でちゃんと残ります。でも、できれば画像を使いたいのです。 うまいやり方をご存じの方は、教えていただけますか。おねがいします。

  • javascriptでの2つのプルダウンメニューの初期値

    下記の2つの連動するセレクトメニューで最初の国名のプルダウンで「日本」を選択、次の都市名のプルダウンで「東京」を選択し、 その後ブラウザの戻るボタンで戻り後、再びページを表示させたり、または入力内容確認画面へ進みjavascriptのonclick="history.back()"で入力ページ(下記スクリプト記述ページ)に戻ると1つ目の国名のメニューは日本が表示されていますが、2つ目の都市名のメニューが空白になってしまいます。 そのため、都市名のプルダウンで東京を表示させるには、1つ目の国名のプルダウンを一度日本以外にしてから再度日本に表示させるといった動作が必要になってしまっています。 そこで、都市名のメニューを空白にさせずにそのまま表示させるように色々調べたのですが、解決策がありませんでした。 そこで、せめて両方のプルダウンともに「国を選択して下さい」にした状態にはできないかと考えております。 何か良い方法がありましたらば教えて頂けませんでしょうか? <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [ ["国名を選択してください,"], ["東京,tokyo","大阪,osaka","名古屋,nagoya"], ["ニューヨーク,ny","ロサンゼルス,la"] ]; var i, tmp = []; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ tmp = optionData[selNo][i].split(","); selObj.options[i] = new Option(tmp[0], tmp[1]); } } } </script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="" selected>国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub"> <option value="">国を選択してください</option> </select> </form> </body> </html>

  • プルダウンメニューの表示について

    お世話になります。 ホームページを作成中ですが、文字の大中小に変更できるように設定したいです。 そこで見つけてきのはプルダウンメニューで、 <form name="puru"> <select name="amu" onchange="fontsize();"> <option>14pt</option> <option>12pt</option> <option selected>10pt</option> </select> </form> これを入れるというものですが、これだとプルダウンメニューの表示は10pt、12pt 14ptという表示に なってしまいます。これを利用して、プルダウンメニューの表示を大中小というふうにできないでしょうか? 回答をお願いします。

  • プルダウンについての質問です

    プルダウンメニューでリンク先にページを飛ばした後、ツールバーの <戻るボタン>でページを戻すと、同じプルダウンメニューのリンク先 には飛ばなくなってしまいます。 どうすればページを戻した後でも、同じプルダウンメニューのリンク 先に飛ばす事が出来るのでしょうか? 使ったHTMLは <FORM NAME="linkmenu"> <SELECT style="width: 220px" NAME="linklist" onchange="location=this.value"> <OPTION SELECTED>以下の項目から選択してください。</OPTION> <OPTION VALUE="index.html">1.テストページ1</OPTION> <OPTION VALUE="2.html">2.テストページ2</OPTION> <OPTION VALUE="3.html">3.テストページ3</OPTION> </SELECT> </FORM> というものです。

    • ベストアンサー
    • HTML
  • ホームページでJavascriptを使ったプルダウンメニューによる画面切替え

    ホームページでiframe内のページをプルダウンメニューを変更したいのですが、アンカーポイントでのプルダウンメニューのリンクではホームページを代える事は出来ないのですか? プルダウンメニューを行うとJavascriptエラーが起きて画面がリンク先になりません。 ○Javascriptの文 <SCRIPT language=JavaScript type=text/JavaScript> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } //--> </SCRIPT> ○iframeの文 <iframe src="report.html" name=if width="440" height="500" frameborder="0">iframeを使用しております。<br></iframe> ○プルダウンメニューの文 <FORM name=form1> <SELECT onchange="MM_jumpMenu('parent.frames[\'if\']',this,0)" name=menu1> <option value="report.html\#0008" selected>第8回目</option> <option value="report.html\#0007">第7回目</option> <option value="report.html#0006">第6回目</option> <option value="report.html#0005">第5回目</option> <option value="report.html#0004">第4回目</option> <option value="report.html#0003">第3回目</option> <option value="report.html#0002">第2回目</option> <option value="report.html#0001">第1回目</option> </select> </form> どこが悪いのか教えてください。分かる方いらっしゃいますか? 教えてください、お願いいたします。

  • プルダウンリンクを外部ファイルで表示させたいのですが

    下記フォームで表示されません -------------------------------------------- index.php 抜粋 <form method="post" action="jump.php"> <select name="jump_url"> <?PHP include("./define.inc"); foreach( $url as $jump_title => $jump_url){ print "<option value=\"".[key($jump_title)]."\">".[key($jump_url)]."</option>\n"; } ?> </select> <input type="submit" value="ジャンプ"> </form> ---------------------------------------- define.inc <?PHP $url[] = "グーグル" => "http://google.co.jp"; $url[] = "ヤフー" => "http://yahoo.co.jp"; $url[] = "グーグル" => "http://google.co.jp"; ?> ---------------------------------------- jump.php <?PHP $jump_url = $_POST['jump_url']; header("Location:{$jump_url}"); ?> ---------------------------------------- どうもうまく表示されません どなたかご教授くださいませんでしょうか? よろしくお願いいたします。

    • 締切済み
    • PHP

専門家に質問してみよう