- 締切済み
２つのプルダウンメニューを連動させてリンク先へ遷移
２つのプルダウンメニューを連動させて、 ひとつ目のプルダウンメニュー内の条件にそれぞれ連動させた選択肢をふたつ目のプルダウンメニューで表示させ、 ふたつのプルダウンで選んだ項目に連動したリンク先へジャンプさせたいと考えております。 下記のソースで試した所、IE6ではOKでしたがFireFox、Safariでは ダメでした。（プルダウンじたいが表示されない） IE6と7、FireFox2と3、MacのSafari3で表示できるようにしたいので教えてください。 ちなみに私はHTMLレベルのスキルしかありませんのでできるだけ具体的に教えて頂けると助かります。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テスト</title> </head> <body> ↓ここにプルダウンが入る<br> <script type="text/javascript"> var printf = document.write; RightListStr = ["選択してください","条件A","条件B"]; LeftListStr = [["選択してください","",""],["選択してください","条件A-1","条件A-2"],["選択してください","条件B-1","条件B-2"]]; URL = [["","",""],["","http://条件A-1リンク先.com","http://条件A-2リンク先.jp"],["","http://条件B-1リンク先.com","http://条件B-1リンク先.jp"]]; printf('<form name="MyForm"><select name="RightList" onChange="ChangeList(this);">'); for(var i = 0; i < RightListStr.length; i++) printf('<option>' + RightListStr[i]); printf('</select> <select name="LeftList" onChange="MoveURL(this)">'); for(var i = 0; i < LeftListStr[0].length; i++) printf('<option>' + LeftListStr[0][i]); pritnf('</select></form>'); function MoveURL(LeftObject){ var RightObject = document.MyForm.RightList location.href = URL[RightObject.selectedIndex][LeftObject.selectedIndex]; return; } function ChangeList(RightObject) { var LeftObject = document.MyForm.LeftList; for(var i = 0; i < LeftListStr[RightObject.selectedIndex].length; i++) LeftObject.options[i].text = LeftListStr[RightObject.selectedIndex][i]; return; } </script> </body> </html>
- ririco07
- お礼率96% (64/66)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
全般的に書き方が古いですね・・・ 汎用性をだすならDOMで書きなおした方がよいかもしれません
関連するQ&A
- ２つのプルダウンを連動させる
２つプルダウンがあったとき片方で選択した内容に応じもう一方のプルダウンの内容が 変更されるように以下のようなコードを書いてみました。 しかし、これだと1番目のプルダウンでAを選択した後、Bを選択しなおすと 2番目のプルダウンの選択肢には前回Aを選んだ時に表示されていた内容が 残ってしまいます。そこで 連動するプルダウンの内容を作成する処理（Forループの処理）の直前で for (i=0; i<itemNum; i++) { document.myForm.tableName.options[i] = new Option(null, null); } という初期化処理を書いてみたのですが結果は同じでした。 解決するための何か良い方法はございますでしょうか。 <html> <head> <title>プルダウン連動サンプル</title> <script type="text/javascript"> table_name = [["10", "9", "8", "7", "6"], ["りんご", "メロン", "バナナ"], ["嵐"]]; function setMenuItem(n) { itemNum = table_name[n].length; // 項目数 //連動するプルダウンの内容を作成 for (i=0; i<itemNum; i++) { alert(table_name[n][i]); document.myForm.tableName.options[i] = new Option(table_name[n][i], table_name[n][i]); } //プルダウンの先頭を選択 document.myForm.tableName.options[0].selected = true; } </script> </head> <body onLoad="setMenuItem(0)"> <form name="myForm"> <select name="database" onChange="setMenuItem(this.selectedIndex)"> <option selected>A</option> <option>B</option> <option>C</option> </select> <select name="tableName"> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- セレクトメニューの連動、そしてページへのリンク
[セレクトメニューA] > [セレクトメニューB] > [セレクトメニューC] …というような、まずAで選び、それに対応したメニューBのうちのひとつを選び、そして最後にCのうちのひとつを選ぶと、 (たとえば、Cのセレクトメニューには Yahoo Google Excite のようなのがあり、それらを選択すると、) あらかじめ設定しておいた該当するページへ行く、というようなしくみはどのように作ればいいのでしょうか？ ネット上を探し回って、自分で組み立てて作ってみましたが、 <!-- menu = [ ["A","B","C","D"], ["E","F","G"], ["H"] ]; function setMenu(n) { len = document.myForm.sb.options.length; for (i=len-1; i>=0; i--) { document.myForm.sb.options[i] = null; } for (i=0; i<menu[n].length; i++) { document.myForm.sb.options[i] = new Option(menu[n][i],menu[n][i]); } } menuItem = [ ["Z"], ["Y","X","W","V"], ["U","T","S","R"] ]; function setMenuItem(a) { len = document.myForm.s.options.length; for (c=len-1; c>=0; c--) { document.myForm.s.options[c] = null; } for (c=0; c<menuItem[a].length; c++) { document.myForm.s.options[c] = new Option(menuItem[a][c],menuItem[a][c]); } } // --> ───────────────── <form name="myForm"> <select name="a" onchange="setMenu(this.selectedIndex)"> <option checked selected>セレクトA</option> <option value="A">A</option> <option value="E">E</option> <option value="H">H</option> </select> > <select name="sb" onchange="setMenuItem(this.selectedIndex)"> <option selected> </option> </select> > <select name="s" onChange="popJump(this)"> <option selected > </option> </select> </form> …と、３つを連動させるまでにはいたったのですが、最後の、「セレクトCを選んだときに該当ページへジャンプ」というのができません。 このプログラムにどのような修正を加えればよいのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ２つのプルダウンの連動に関して
２つのプルダウンの連動に関して javascript の話になってしまうかと思われますが、教えて下さい。 ２つのプルダウンを連動させたいと考えていますが、単純に決められた項目を初期値として 設定するようなプルダウンであれば問題なくできますが、テーブルから取得したデータをプルダウン にセットした後に制御を掛けたいと考えています。 以下のようなソースを活用できないか？と考えていますが、どのような方法があるでしょうか。。。。 《活用ソース》 <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=JavaScript> <!-- function funcSubmit() { if (document.formMain.pref.selectedIndex == 0 && document.formMain.city.selectedIndex == 0) { window.alert("都道府県と市町村を選択してください"); return false; } else { return true; } } function funcMain(b) { if (document.formMain.pref.selectedIndex == 0) { document.formMain.city.length = 1; document.formMain.city.selectedIndex = 0; } else { if (b) { document.formMain.city.length = 1; document.formMain.city.selectedIndex = 0; } var city = cities[document.formMain.pref.selectedIndex - 1]; document.formMain.city.length = city.length + 1; for (var i = 0; i < city.length; i++) { document.formMain.city.options[i + 1].value = i; document.formMain.city.options[i + 1].text = city[i]; } } } ↓↓↓↓ ※これらの情報をテーブルから取得したデータとしたい。↓↓↓↓ var prefs = new Array("東京都", "大阪府", "愛知県", "千葉県"); var cities = new Array(); cities[0] = new Array("小平市", "町田市", "三鷹市"); cities[1] = new Array("大阪市", "豊中市"); cities[2] = new Array("名古屋市", "半田市"); cities[3] = new Array("千葉市", "市川市", "柏市"); // --> </SCRIPT> </HEAD> <BODY onLoad="funcMain(false)"> <FORM NAME=formMain METHOD=POST ACTION=result.asp onSubmit="return funcSubmit()"> <SELECT NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(都道府県を選択してください) <OPTION VALUE="0">東京都 <OPTION VALUE="1">大阪府 <OPTION VALUE="2">愛知県 <OPTION VALUE="3">千葉県 </SELECT> <SELECT NAME="city"> <OPTION VALUE="" SELECTED>(市町村を選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> <INPUT TYPE=submit VALUE="登録"> </FORM> </BODY> </HTML>
- ベストアンサー
- PHP
- 複数のプルダウンの連動とリンク
複数の連動するプルダウンを作成し、さらに最後のページをリンクで 飛ばしたいのですが、java初心者のためそのように記述してよいのか 分かりません。 ３つのプルダウンであれば他のページに記述例があったのですが、 増やす時などにどこをいじればよいか分かりませんでした。 下記ソースは他サイトからのものですが、最後のプルダウンにリンク貼れますか？ 他の記述でもかまいませんので教えてください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <script type="text/javascript"><!-- function ResetOptions( index ) { var select = document.getElementById( "select" + index ); while( select ) { for( var i = 0, len = select.length; i < len; i++ ) { select.options[0] = null; } CreateOption( select, "", "項目" + ( index - 1 ) + "を選択してください" ); index++; select = document.getElementById( "select" + index ); } } function CreateOption( select, key, value ) { var option = document.createElement( "OPTION" ); option.setAttribute( "value", key ); var text = document.createTextNode( value ); option.appendChild( text ); select.appendChild( option ); } function CreateOptions( index, value, pleaseSelect ) { var select = document.getElementById( "select" + index ); if( ! select ) { return; } for( var i = 0, len = select.length; i < len; i++ ) { select.options[0] = null; } var option, text, list; if( index > 1 ) { if( value ) { list = dataList[index-1][value]; } else { ResetOptions( index ); return; } } else { list = dataList[0]; } if( pleaseSelect ) { CreateOption( select, "", "↓選択してください" ); } for( var key in list ) { CreateOption( select, key, list[key] ); } ResetOptions( index + 1 ); } var dataList = [ { "asia": "アジア", "europe": "ヨーロッパ", "south_america": "南米" }, { "asia" : { "japan": "日本", "korea": "韓国" }, "europe": { "italy": "イタリア", "spain": "スペイン", "sweden": "スウェーデン" }, "south_america": { "brazil": "ブラジル", "argentina": "アルゼンチン" } }, { "japan": { "": "38位" }, "korea": { "": "45位" }, "italy": { "": "3位" }, "spain": { "": "4位" }, "sweden": { "": "30位" }, "brazil": { "": "2位" }, "argentina": { "": "1位" } } ]; window.onload = function() { CreateOptions( 1, null, true ); ResetOptions( 2 ); }; //--></script> </head> <body> <h1>サッカー世界ランク</h1> <p>地域：<select id="select1" onchange="CreateOptions( 2, this.options[this.selectedIndex].value, true );"></select></p> <p>国：<select id="select2" onchange="CreateOptions( 3, this.options[this.selectedIndex].value, false );"></select></p> <p>順位：<select id="select3"></select></p> </body> </html>
- 締切済み
- JavaScript
- プルダウン連動とリンク
選択項目により連動するプルダウンを利用し、各々のページにリンクさせようと思っているのですが、上手くいきません。 一つ目のプルダウンで項目を選択⇒二つ目のプルダウンに項目が表示される⇒選択するとリンクする。 プルダウンはこちらのソースを利用しています。 http://d.hatena.ne.jp/Mars/20071109 連動リンクはこちらを参考にしました。 http://air.rulez.jp/shop/java/jt_pulldown.htm 現在のソースは下記のようになっています。 プルダウンの連動とリンク、それぞれ単体での動作確認は出来たのですが、組み合わせると上手くいきません。 最初のプルダウンで「YYY」を選択し、連動して次のプルダウンに表示される「yahooかgoogle」を選択したらURL先にリンクしたいのですが。 現在はプルダウンは連動はされるものの、2つめのプルダウンで項目を選択しても何も起こらない状態です。 ----------------------------------------------------------------- <script type="text/javascript" src="ConnectedSelect.js"></script> <form> <select id="SEL1"> <option value="XXX">XXX</option> <option value="YYY">YYY</option> </select> <select id="SEL2" onChange="top.location.href=value"> <optgroup label="XXX"> <option value="x1">x1</option> <option value="x2">x2</option> </optgroup> <optgroup label="YYY"> <option value="http://www.yahoo.co.jp/">yahoo</option> <option value="https://www.google.co.jp/">google</option> </optgroup> </select> </form> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> --------------------------------------------------------------- これはどのように修正すればリンクされるようになるでしょうか？ また別の方法があればそちらでも構いません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。
- 締切済み
- JavaScript
- プルダウンメニューで、選択項目をリンク先でも維持したい。
javascriptを使用したプルダウンメニューについて質問です。 <form name="form1"> <select name="select" onChange="location=select.options[select.selectedIndex].value"> <option value="a.html#01">Ａ01</option> <option value="a.html#02">Ａ02</option> <option value="a.html#03">Ａ03</option> <option>---------------</option> <option value="b.html#01">Ｂ01</option> <option value="b.html#02">Ｂ02</option> <option>---------------</option> </select> </form> ２つのページ（a.html、b.html）上部に上記のようなプルダウンメニューを置き、それぞれ相互に行き来できるようにしました。 一応正常に動くのですが、たとえばa.htmlのプルダウンで『Ｂ01』を選択してリンク先b.htmlに飛ぶと、プルダウンの選択項目が一番上の『Ａ01』に戻ってしまっています。 b.htmlに飛んだ後も『Ｂ01』選択の状態で残したいのですが。 どのようにすればよいのでしょうか・・・ よろしくお願い致します。
- ベストアンサー
- JavaScript
- 連動するプルダウンリストの作成
他にも似たような質問があるのですが、連動するプルダウンリストを作成しています。 二次元配列を使ったものはあるのですが、三次元以上の多次元配列を使ったものがないので質問させて頂きました。 下記のような内容でエリアと都道府県を選択できるプルダウンリストがあります。 これをJavascriptの三次元配列を利用してさらに市町村を選択できるリストを作成したいと思っています。 それぞれのプルダウンリストは、エリアの中でAを選択するとAのエリアの中にある都道府県が選択でき、都道府県を選択するとそれに該当する市町村が選択できるように連動するように作成したいと思っています。 ご指導お願いします。 <html> <head> <script language="javascript"><!-- function hoge(area){ var t=new Array();//optionの項目(text) var v=new Array();//optionのvalue if(area=='A'){ t[0]='A-1';v[0]='A1'; t[1]='A-2';v[1]='A2'; t[2]='A-3';v[2]='A3'; t[3]='A-4';v[3]='A4'; t[4]='A-5';v[4]='A5'; } else if(area=='B'){ t[0]='B-1';v[0]='B1'; t[1]='B-2';v[1]='B2'; } else if(area=='C'){ t[0]='C-1';v[0]='C1'; t[1]='C-2';v[1]='C2'; t[2]='C-3';v[2]='C3'; } else if(area=='D'){ t[0]='D-1';v[0]='D1'; t[1]='D-2 hogehoge';v[0]='D2'; } else{t[0]='都道府県'} var obj=document.frm.s2.options; obj.length=0; for(i=0;i<t.length;i++){ obj[i]=new Option(t[i]); obj[i].value=v[i]; } obj[0].selected=true; if(document.layers){window.resizeBy(-10,-10);window.resizeBy(10,10)} } //--></script> </head> <body> <form name='frm'> <select onChange="hoge(this.options[this.options.selectedIndex].value)"> <option value=''>エリア名</option> <option value='A'>エリアＡ</option> <option value='B'>エリアＢ</option> <option value='C'>エリアＣ</option> <option value='D'>エリアＤ</option> </select> <select name='s2' size=1 onChange="alert(this.options[this.options.selectedIndex].value)"> <option>都道府県</option> </select> </form> </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
- ２つのプルダウンボックスの連動について
<SELECT><OPTION></OPTION></SELECT>タグで作るプルダウンボックスについて質問です。 ＡとＢの二つのプルダウンボックスを設置し、Ａで選択された項目に合わせて、Ｂの表示項目を変更させたいと思っています。 この２つのプルダウンボックスを連動させる方法について、ＪＡＶＡスクリプトを使った方法を知りましたが、利用者がブラウザでＪＡＶＡを切っていた場合は正常に機能しないのでしょうか？ 利用者がブラウザでＪＡＶＡを切っていた場合にも対応できる連動の方法があればぜひ教えてください。
- ベストアンサー
- HTML
- 二つのプルダウンメニューから違うページにジャンプしたい
以前ここで"steel gray"さんから教えて頂いたのですが、自分で手を加えている内に分からなくなってしまいました。ご指導お願い致します。 function jump(Form){ //以下、selectの組み合わせとジャンプ先のリスト。 var jumpList = new Array( ['1','A','http://www.k2.dion.ne.jp/~namae/osietea1.html'], ['1','B','http://www.google.co.jp/'], ['2','A','http://www.yahoo.co.jp/'], ['2','B','http://www.infoseek.co.jp/'], ['','','']); for(var i=0;i<jumpList.length;i++) { if(jumpList[i][0] == Form.elements[0].value && jumpList[i][1] == Form.elements[1].value) window.location.href=jumpList[i][2]; } } //--> </script> <OPTION value="A">選択肢A</OPTION> 以下選択肢Aに6種類 <OPTION value="1">選択肢B</OPTION> 以下選択肢Bに9種類 合計54種類の条件があります。どこをどの様にすればよいのでしょうか？宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
すみません、DOMとかよくわかりません。 ネット上で拾った物をコピペして使いました。 もしよろしければ教えてもらえますでしょうか？
補足
ありがとうございます。 ほかのいくつかのソースをネットでみつけて組み合わせで解決できました。