- 締切済み
複数ファイルで共通のセレクトメニューを動作させるためには？（ソース付き）
いつも勉強させていただいております。今回は質問をさせていただけないでしょうか。 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> それでは、よろしくお願いします。
- yuka_102
- お礼率0% (3/342)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yuu_x
- ベストアンサー率52% (106/202)
希望の動作にならない原因。 ・onchange 属性は、select 要素の状態が変化したときに発生。ページを（起動？）開いたときには、イベントは起きません。select などの onload がほしいところですが、DOM-Level3 以降とのこと。 ・location.href を書き換えると、ページ自体が切り替わるため、提示されたコードでは、select で選んだページへジャンプという動作になる。恐らく希望の動作とは異なるでしょう。 修正方法の考え方は #1 にありますので省略。 下は参考までに [JavaScript] (DOM Level2 later) window./*@if(1) attachEvent('on'+ @else@*/ addEventListener( /*@end@*/ 'load', function(){ try{ var options = document.forms.namedItem('XXX_FORM').elements.namedItem('COMPRISING_URL').options; var ele = null; for(var i=0; i<options.length; i++){ ele = options.item(i); if(document.URL.match(new RegExp('(?:/|\)'+ele.value+'(?:\\?|$)'))){ ele.selected = true; break; } } catch(e){ alert(e.message); } }, false); [HTML] <form action="#" id="XXX_FORM"> <p> <select name="COMPRISING_URL"> <option value="none" checked>none</option> <option value="A.html">A.html</option> <option value="B.html">B.html</option> </select> </p> </form> ＊表示の関係上全角スペースが入ってるので、使用する場合は置換してください。 ＊フォームなどの名前は適宜 HTML板の回答にもありましたが、サーバスクリプト（PHP など）でできるなら、そちらでした方が良いと思います。
- zxcv0000
- ベストアンサー率56% (111/196)
提示された SELECTリストには初期値の指定が無い様ですが、現在の HTML の名前を初期値にしたいというご質問でしょうか？ だったら、 BODYタグの onload か何かで「現在の HTlMLファイル名と同じ value を持つ OPTIONタグを selected にする」という処理が必要と思います。
関連するQ&A
- 複数ファイルで共通のセレクトメニューを動作させるためには？（ソース付き）
いつも勉強させていただいております。今回は質問をさせていただけないでしょうか。 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
- セレクトメニューが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> ================================================
- ベストアンサー
- JavaScript
- 複数のプルダウンメニューの作り方。
・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> ご指南の程宜しくお願いします。
- ベストアンサー
- JavaScript
- セレクトメニューでジャンプしたページを新しい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
- ベストアンサー
- JavaScript
- セレクトメニューで
セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <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>
- 締切済み
- JavaScript
- 複数のプルダウンメニューの作り方。
質問内容に不備があったため再度質問させて頂きます。 前回答えて下さった方には大変ご迷惑をおかけします。 非常に多くのものを奇麗に見せたいのでプルダウンメニューがいいと思い、作りました。 ・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
- 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では動いて欲しくて困っています。 どなたか助けていただけないでしょうか
- ベストアンサー
- JavaScript
- 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> 、、、、ダメでした。間違っているんですよね。。。 よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- セレクトメニュー選択でもう一つセレクトメニューを出す
「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。 しかし、「ブロック名」を「Ａブロック」選択しても「部署名」が「Ｂトップ～」が出てしまいます。 何がおかしいのか分からないので、ぜひ教えてください。 よろしくお願いいたします。 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>
- ベストアンサー
- JavaScript
