• ベストアンサー

プルダウンメニューを別ファイルで管理するには?

いろんなページでプルダウンメニューをつけていると、更新とかのときにいちいち全てに手を入れなくてはならなくて大変なのですが、スタイルシートの時のように外部スタイルシートを読み込むみたいなことをしたいと思っているのですが方法がまだわかりません。ご教授をお願いします。また、そういうことを学習できるサイトとかがありましたら教えてください。

  • nobu3
  • お礼率57% (41/71)

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

  • ベストアンサー
  • leaz024
  • ベストアンサー率75% (398/526)
回答No.2

「外部JavaScriptファイル」を使えば簡単にできます。 外部JSファイルは普通のテキストファイルで、拡張子は「js」にします。 これを読み込むには、HTMLのHEAD領域に、  <SCRIPT language="JavaScript" src="外部JSファイル名.js"></SCRIPT> と書きます。 この SCRIPT タグは、必ず閉じる必要があります。 そして、外部JSファイル内にプルダウンの設定を行う関数を書き、これを各HTMLから呼び出します。 No.1 の方法が正攻法だと思うのですが、どうも NN4 では思うようにならないので、別の方法も挙げておきます。 (OPTION は設定されるのですが、プルダウンの幅が短いままになってしまいます。) ■option.js function drawOption(doc) {   doc.writeln('<OPTION value="送信値1">テキスト1');   doc.writeln('<OPTION value="送信値2">テキスト2'); } ※↑にOPTIONタグの内容を、そのまま書きます。 ■HTMLのHEAD領域 <SCRIPT language="JavaScript" src="option.js"></SCRIPT> ■プルダウンを設置したい箇所 <SELECT …> <SCRIPT language="JavaScript"><!--  drawOption(document) //--></SCRIPT> </SELECT> IE5.0/IE5.5/NN4.7/NN6.2 動作確認済み

nobu3
質問者

お礼

早々の回答を感謝します。おかげさまでこれまでプルダウンメニューのたくさんのリンクに手を入れていたのがすっきりと解決しまして非常に助かります。ご教授いただいた内容もすっきりと詳しく書かれていましたのでありがたかったです。今回を良い機会にとJavaScriptを少しづつ学習しようと思います。今度の回答は動作確認までしてくださいまして本当にありがとうございました。

その他の回答 (1)

  • makokoko
  • ベストアンサー率50% (7/14)
回答No.1

外部JavaScriptファイル内に、プルダウンを設定する関数を書いておきます。 例1: function SetPulldown(SelectId){ var OptionTexts = new Array("1番目","2番目"); for(var i=0; i<OptionTexts.length; i++) SelectId.options[i] = new Option(OptionTexts[i],i); } この関数が書いてあるjsファイルをプルダウンのあるHTMLファイルで リンクします。で、HTMLファイルにはこう書きます。 例2: <BODY ONLOAD="SetPulldown(Form1.Select1)"> <FORM ID="Form1"> <Select ID="Select1"></Select> </FORM> プルダウンの項目は例2の var Options = new Array("1番目","2番目"); ←ここ 括弧の中の文字を増やした分だけ設定できます。 SelectId.options[i] = new Option(OptionTexts[i],i); ←ここ OptionTextsは表示するテキスト、iはCGI等に送信される値(value)です。 もちろんiはOptionTextsと同じにすることもできます。 こんな感じでしょうかねぇ。

nobu3
質問者

お礼

早速の回答をありがとうございました。ただ、私の理解力不足でここまで1日半かかってもうまくいきませんでした。HTMLファイルに設置したプルダウンメニューのリンクが出来なくて「デバックしますか」と表示されます。今回は幸いに「leaz024さん」のやり方でうまくいきましたのでそちらの方で決めようと思います。ありがとうございました。

関連するQ&A

  • プルダウンメニューが隠れてしまいます

    indexページにFlashで制作したswf形式のムービーを配置しました。 ところが ヘッダに配置してたメニューからJavaScriptでプルダウン表示されるメニューと ムービーが重なる部分がレイヤーのような状態となり プルダウンメニューがムービーの背面へ隠れてしまい メニューの機能が失われてしまいました ・swfはhtmlに直接配置して表示 ・プルダウンのメニューは外部に置いたjsファイルを読み込んで表示 ・メニューも外部JavaScriptからの読み込み 以上の仕様なのですが問題点はswfの配置方法でしょうか? それともJavaScriptのレイヤーに問題があるのでしょうか? アドバイスをお願い致します

  • 上下フレーム分割ページでプルダウンメニューはできますか?

    こんにちは。 いつもお世話になっております。 HPのコンテンツが増えてきたので、スタイルシートを 使って、プルダウンメニューにしたのですが・・・。 ちょっと、メニューの項目名を変えたい、と思った 時に、全部のページを変更してまわるのは、手間だなぁ と思って、上下でフレーム分割をして、上に プルダウンメニュー、したに、それぞれのページが 来るようにしたいのです。 ためしにやってみたのですが、プルダウンがしたの ページで隠れてしまう上に、 タイムエラーが出ました。 デバッグして下さい というエラーメッセージが出てします。 上下フレーム分割ページでプルダウンメニューはできない のでしょうか・・・? どうかご指導よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ホームページビルダー12でのプルダウンメニューの作り方を教えてください。

    ホームページビルダー12でプルダウンメニューをつくろうと思い、ホームページビルダー13スパテク182を見ながら、やっているのですが、さっぱりわかりません。 本を読むと、最初、スタイルシートマネージャを開くのですが、いきなり、style.css(link)が本には書かれているのですが、実際には表示されていないので、どっから出てきたのかわからないです。 あと、ホームページビルダー上のどこに、「スタイルクラス」ツールバーがあるのかわかりません。 仕方がないので、ググったのですが、プルダウンメニューの作り方がわかりません。 ホームページビルダーでのプルダウンメニューの作り方、わかる方いらっしゃいましたらおしえてください。 宜しくお願いします。

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

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

  • プルダウンメニューで読み込む外部Jsファイル選択

    HTMLに外部JSファイルを読み込ませたものが5ページあります。 現在、HTMLを10個作ってそれぞれ別のJSファイルを読み込ませているのですが、HTMLは読み込むJSファイルが違うだけで、他はまったく同じものです。 これを一つのHTMLに1つにして、読み込むJSファイルをプルダウンで変えられたらと思っているのですが、こういった事は可能でしょうか?可能でしたら方法をご伝授ください>< 【現在】 HTML1-menu1を読み込ませている HTML2-menu2を読み込ませている HTML3-menu3を読み込ませている HTML4-menu4を読み込ませている 【こうしたい】 HTML-プルダウンでメニュー1を選択するとmenu1.jsが読み込まれる      -プルダウンでメニュー2を選択するとmenu2.jsが読み込まれる      -プルダウンでメニュー3を選択するとmenu3.jsが読み込まれる      -プルダウンでメニュー4を選択するとmenu4.jsが読み込まれる

  • JSでプルダウンメニューリンクジャンプについて質問です。

    プルダウンメニューで、サイト全体のメニューを入れ込んでクイックジャンプ、みたいにして作っていますが、スクリプト部分は、HEADにいれて、外部ファイルでリンクをさせているのですが、実際に表示される<FORM>~</FORM>部分は、全てのページのBODY内に書き込む必要がありますよね?それは、たとえば、サイト内のメニューが変更になったりしたときには、今まで作った全てのページにコピペーストした<FORM>~</FORM>内容をまた、全部1ページづつ変更してゆかなくてはならない、、、という方法しかないのでしょうか?何か他に、1枚のテンプレートみたいなところにリンクをさせて、その1枚を変更すれば、そのテンプレートを使用している全ページが一気に変更になる、、というようなことはできるのでしょうか。。。教えてください。

  • 2つのプルダウンメニューで、同じものを選べないようにする

    ふたつの選択肢を選ぶために、プルダウンメニューがふたつ並んでいます。  例えばメニュー1の選択肢 ・A ・B ・C ・D  でAを選んだとき、メニュー2の内容が ・B ・C ・D  になるようにしたいのですが、どうすればいいでしょうか?  チェックボックスで選べる数をふたつまでにする、というのも方法としてはありなんですが、今回は都合上プルダウンメニューで実装したいのです。ご教授お願いします。

  • プルダウンメニューが使えない

    グーグルクロームです。 ウェッブサイト、プルダウンメニューからの選択を行おうとしても、すぐにプルダウンが閉じてしまい、選択できません。 IEでは正常です。 回避方法はありますか?

  • プルダウンメニューについてです。

    プルダウンメニューについてです。 http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっています。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> 説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。(”メニューを表示する”のページを作りたい。) どうしたらよいでしょうか?よろしくお願いします。

  • プルダウンメニューの作り方

    プログラム初心者ですが、よろしくお願いします。 タイトルの通り、HP上でプルダウンメニューを作りたいのですが、基本的に誰でも閲覧できるHP(特にビギナー)にしたいので、プラグインが必要なFlashは避けたいと考えております。 しかし、構造的(?)にはFlashで作成するようなプルダウンメニューにしたいのです。 例えばマツダのサイトのように… http://www.mazda.co.jp/home.html ここのページはFlashで作成されてるようですが、例えばここでいうと、、、「カーラインナップ」をオンマウスすると左側にずらりとメニューが現れます。 トップページで下の階層まで確認できます。 このような作りにしたいのですが、HTMLのみで、これを作成しようとすると、ヤフーメールの様に「フォルダ」の前に「+」マークがあって、それをクリックして、「受信箱」「送信箱」のHTMLを呼ぶというが思い浮かぶのですが、コレだと、いちいち「クリック」という動作をしないといけないのが、ひっかかります。 HTMLのみだとこれしかないでしょうか?? 例えば「リスマチック」のHP(左テーブル側)等はどのように作成しているのでしょうか? http://www.lithmatic.co.jp/index2.html リスマチック方式はいい感じ~、って思ってるんですけど、ヤフーメール方式とは違いますよね? どなたか、よろしくお願いします。