• 締切済み

複数ファイルで共通のセレクトメニューを動作させるためには？（ソース付き）

いつも勉強させていただいております。今回は質問をさせていただけないでしょうか。 A.html、B.htmlの両方のファイルの同じ内容のセレクトメニューを 作っています。 A.htmlを起動するとメニューにA.htmlが B.htmlを起動するとメニューにB.htmlを表示したいと思っています。 いろいろな、サイトを見ると下記で問題ないように思いますが動作しません。 何か問題があるのでしょうか？ IE/Firefoxで動作させていと思っています。 <body> <FORM> <SELECT onchange="location.href=this.options[this.selectedIndex].value"> <OPTION value="A.html">A.html</OPTION> <OPTION value="B.html">B.html</OPTION> </SELECT> </FORM> </body> それでは、よろしくお願いします。

  • HTML
  • 回答数4
  • ありがとう数2

みんなの回答

  • koke29
  • ベストアンサー率58% (114/196)
回答No.4

あー なるほどー 私、javascriptはあんまりわからないので とりあえずPHPでの方法を書いてみますね <? $select = $_REQUEST[select]; $sel[$select] = "selected"; ?> <FORM> <SELECT name="select" onchange="location.href=this.options[this.selectedIndex].value; submit();"> <OPTION value="A.html" <? print $sel['A.html'] ?> >A.html</OPTION> <OPTION value="B.html" <? print $sel['B.html'] ?> >B.html</OPTION> </SELECT> </FORM> こういう風にすると開いたページの方にselectedが付きます ただ、optionのvalueとそのあとの<?～ っていうやつは全部手打ちに するので、200ページ分のリストをガーっと一回作らなきゃならんです （一個作ればあとはコピペでいけますが） javascriptの方がもしかしたら簡単に出来るかもしれないので もう少し詳しくやりたいことを書いて、javascript板で質問してみるのも いいかもしれませんよー うまくいくといいですねー

  • koke29
  • ベストアンサー率58% (114/196)
回答No.3

あれ？？AにもBにも同じフォームが入ってるんですよね？？ それならA.htmlは <SELECT onchange="location.href=this.options[this.selectedIndex].value"> <OPTION value="A.html" selected>A.html</OPTION> ←こっちにselected <OPTION value="B.html">B.html</OPTION> </SELECT> B.htmlは <SELECT onchange="location.href=this.options[this.selectedIndex].value"> <OPTION value="A.html">A.html</OPTION> <OPTION value="B.html" selected>B.html</OPTION> ←こっちにselected </SELECT> でいいんじゃないですか？？ 単純なことなのに深読みしすぎてしまいましたが、こういうことですよね？

yuka_102
質問者

補足

すいません。 私の書き方が悪かったかもしれません。 A.html、B.htmlのファイルの内容を全く同じにしたいのです。 実は、このファイルが２００くらいあるのです。 その為、１つづつ変更することが現実的にできないのです。 それを踏まえていただければ幸いです。

  • koke29
  • ベストアンサー率58% (114/196)
回答No.2

開いているページの方の<OPTION>にselectedを入れたいってことでしょうか （Aが開いているときは Aにselected、BならBに） そうならちょっと長くなりそうなので後でレス入れます 今すぐはちょっとムリなので…スミマセン

yuka_102
質問者

補足

> selectedを入れたいってことでしょうか はい、その通りです。 <FORM></FORM>の部分を全く同じにして、IE/Firefoxで動作できる ようにしたいと思っているのです。 > そうならちょっと長くなりそうなので後でレス入れます > 今すぐはちょっとムリなので…スミマセン 誠に申し訳ございません。 期待してお待ちしておりますので、よろしくお願いいたします。

  • koke29
  • ベストアンサー率58% (114/196)
回答No.1

試しにFirefox・IE7で試してみたら（たぶん）問題なく動きましたよー 記載のコードを実行→プルダウン表示→AorB選択で対象ファイル表示 という感じになってました（希望の動作ですよね？） なので、考えられる理由は記載のコード以外ってことになるでしょうねー 質問者さんのブラウザがjavascript無効になってるとか？？ （二つのブラウザでどっちもって考えにくいんですけどねぇ） または、記載のコードの前後に何か余計なのが入っててそっちの絡みで 動かないとか… もし、実際使うファイルに記載のコード以外が入ってるなら 一回コメントアウトするとか、別ファイルに移植して該当のコードだけで 試してみるのはいかがでしょう こういうのの原因究明って大抵が消去法になってしまうと思うので 時間はかかるかもしれませんが、少なくとも記載のコードは問題ない っていう検証は私の環境で証明されたので、別の原因をあたってみましょー 頑張って下さい

yuka_102
質問者

補足

レスありがとうございます。 ソースは、下記だけで、B.htmlに保存しています。 B.htmlを起動すると、ボックスにA.htmlと出ます。 これを、B.htmlにしたいと思っているのです。 どのようにすれば良いか教えていただいてよろしいでしょうか？ <html> <body> <FORM> <SELECT onchange="location.href=this.options[this.selectedIndex].value"> <OPTION value="A.html">A.html</OPTION> <OPTION value="B.html">B.html</OPTION> </SELECT> </FORM> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 複数ファイルで共通のセレクトメニューを動作させるためには？（ソース付き）

    いつも勉強させていただいております。今回は質問をさせていただけないでしょうか。 A.html、B.htmlの両方のファイルの同じ内容のセレクトメニューを 作っています。 A.htmlを起動するとメニューにA.htmlが B.htmlを起動するとメニューにB.htmlを表示したいと思っています。 いろいろな、サイトを見ると下記で問題ないように思いますが動作しません。 何か問題があるのでしょうか？ IE/Firefoxで動作させていと思っています。 <html> <body> <FORM> <SELECT onchange="location.href=this.options[this.selectedIndex].value"> <OPTION value="A.html">A.html</OPTION> <OPTION value="B.html">B.html</OPTION> </SELECT> </FORM> </body> </html> それでは、よろしくお願いします。

  • セレクトメニューがIE/FFで違う動作 ソース有

    セレクトメニューの動作が、IE/Firefox(IE以外のブラウザ)で違う（ソース付き） 皆さん、よろしくお願いします。 全く同じ数十のhtmlファイルがあります。 そこで、共通のセレクトメニューを使っています。 ファイル名によって表示項目を変えています。 IEでは、B.HTMLを起動すると、B.HTMLがメニュー項目に出ます。 ただ、FirefoxだとB.HTMLを起動すると、A.HTMLがメニュー項目に出てしまいます。 A.HTMLは両方とも正しく出ます。 どのブラウザでも、IEと同じ動作をさせるには、どのようにすればよろしいでしょうか？ ●制限 B.HTMLのOPTIONにselectedを加えるという事は、全ファイル同じ内容である必要があるので、できないのです。 PHPなどでなく、javascriptで実現したいと思っております。 Firefox(IE以外のブラウザ)のjavascriptは有効になっています。 下記を、A.HTML、B.HTMLというファイルに保存すればそのまま動作します。 ================================================ <html> <head> <SCRIPT type="text/javascript"> function selectChange() { var sURL = document.URL.toUpperCase(); if (sURL.indexOf("A.HTML") != -1) Prog.selectedIndex = 0; else if (sURL.indexOf("B.HTML") != -1) Prog.selectedIndex = 1; } </script> </head> <body onLoad="selectChange()"> <select onChange="location.href=this.options[this.selectedIndex].value" name="Prog" size="1"> <OPTION value="A.HTML">A.HTML</OPTION> <OPTION value="B.HTML">B.HTML</OPTION> </select> </body> </html> ================================================

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

    ・Aリスト、Bリスト…とプルダウンメニューを複数含んだフォームを一つのhtmlに作りたいのですが、上手くいきません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form> ご指南の程宜しくお願いします。

  • セレクトメニューでジャンプしたページを新しいWindowで表示したい

    リンク先をセレクトメニューで選んでもらって、そのページ内に開く方法は色々なJavaScriptを紹介しているページで見せていただいたのですが、同じWindowではなく、新しいWindowを開いてそこに表示したいのです。 下記は同じWindow内に開いてしまいますが、現在はこのようなカンジで使用しています。 <form> <select onChange="location=this.options[this.selectedIndex].value"> <option value="">選択して下さい <option value="test1.html">TEST-1 <option value="test2.html">TEST-2 <option value="test3.html">TEST-3 </select> </form> 宜しくお願いしますm(_ _)m

  • セレクトメニューで

    セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD>

  • フォーム

    <FORM> <SELECT onchange="location=this.options[this.selectedIndex].value"> <OPTION value="">----- 一覧 -----</OPTION> <OPTION value="no1.html"target="f2">NO1</OPTION> </FORM> うまくできません　なぜでしょうか

    • ベストアンサー
    • HTML
  • 複数のプルダウンメニューの作り方。

    質問内容に不備があったため再度質問させて頂きます。 前回答えて下さった方には大変ご迷惑をおかけします。 非常に多くのものを奇麗に見せたいのでプルダウンメニューがいいと思い、作りました。 ・Aリスト、Bリスト、Cリスト…とプルダウンメニュー（メニューを選ぶとアンカー先に飛ぶようにしたい）を複数含んだフォームを一つのhtmlに作ったのですが、動作しません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 list.html <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="list.html#a001">A001</option> <option value="list.html#a002">A002</option> <option value="list.html#a003">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="list.html#b001">A001</option> <option value="list.html#b002">A002</option> <option value="list.html#b003">A003</option> </select> </form> <a id="a001" name="a001"></a>A001<br> <a id="a001" name="a002"></a>A002<br> <a id="a001" name="a003"></a>A003<br> <a id="a001" name="b001"></a>B001<br> <a id="a001" name="b002"></a>B002<br> <a id="a001" name="b003"></a>B003<br> あと、このように同じhtml内でのリンクになる場合は、optionのvalueのlist.htmlを省いてもいいのでしょうか？ 当方、Javascriptに関してはコピペでしか使えない程度の知識の人間です。 ご指南の程宜しくお願いします。

  • javascriptについての質問です。複数のselect等で選択した

    javascriptについての質問です。複数のselect等で選択した文字の値をinputに表示したいのですが2 こちらで <script> function changeFunc(f){ f.elements["text1"].value=f.elements["select1"].value+f.elements["select2"].value; } </script> <FORM> <SELECT NAME="select1" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE="　a">a</OPTION> <OPTION VALUE="　b">b</OPTION> <OPTION VALUE="　c">c</OPTION> </SELECT> <SELECT NAME="select2" onchange="changeFunc(this.form)"> <OPTION VALUE=""></OPTION> <OPTION VALUE="　壱">壱</OPTION> <OPTION VALUE="　弐">弐</OPTION> <OPTION VALUE="　参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> というプログラムを教えていただいたのですが 最新のブラウザーではどれもが動作するのですが IE5.IE6.IE7で動かなくて困っております。 IE5は仕方ないカナとも思ってしまったりするのですが IE6 IE7では動いて欲しくて困っています。 どなたか助けていただけないでしょうか

  • HTML教えて下さい！！！！

    セレクトメニューで別ウィンドウを開きたいのですが出来ません。 教えてください！！よろしくおねがいします。 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" selected>●●●●●</option> <option value="../○○○/○○○/index.html" >●●●●●</option> <option value="../○○○/○○○/index.html">●●●●●A</option> </select> </form></td> </tr> で、ブランクを入れてみたのですが、、、 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" target="_blank" selected>●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> </select> </form></td> </tr> 、、、、ダメでした。間違っているんですよね。。。 よろしくお願いします。

  • セレクトメニュー選択でもう一つセレクトメニューを出す

    「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。 しかし、「ブロック名」を「Ａブロック」選択しても「部署名」が「Ｂトップ～」が出てしまいます。 何がおかしいのか分からないので、ぜひ教えてください。 よろしくお願いいたします。 menuItem = [　　["Ａトップ","A本部","B本部","C本部"], ["Ｂトップ","1本部","2本部","3本部"], ["Ｃトップ","あ本部","い本部","う本部"], 　　　　　　　　["Ｄトップ","●本部","▲本部","◆本部"] ]; function setMenuItem(n) { len = document.form2.BUSYO.options.length; for (i=0; i<len; i++) { document.form2.BUSYO.options[i] = null; } document.form2.BUSYO.style.visibility = "visible"; for (i=0; i<menuItem[n].length; i++) { document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } ---------------------------------------------------------------- <SELECT size="1" name="Block" onChange="setMenuItem(this.selectedIndex)"> <OPTION selected value="0">選択してください</OPTION> <OPTION value="a-block">Aブロック</OPTION> <OPTION value="b-block">Bブロック</OPTION> <OPTION value="c-block">Cブロック</OPTION> <OPTION value="d-block">Dブロック</OPTION> </SELECT> <SELECT size="1" name="BUSYO" style="visibility:hidden"> <OPTION selected value="0">選択してください</OPTION> </SELECT>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する