２つのプルダウンの連動に関して

2023/08/10 14:37

このQ&Aのポイント

２つのプルダウンを連動させたいと考えていますが、テーブルから取得したデータをプルダウンにセットした後に制御を掛けたいと考えています。
連動させたプルダウンで、都道府県と市町村を選択する必要があります。
プルダウンの初期値を設定する場合には、単純な方法でできますが、テーブルからデータをセットする場合には制御が必要です。

ベストアンサー

２つのプルダウンの連動に関して

2010/10/20 17:57

２つのプルダウンの連動に関して javascript の話になってしまうかと思われますが、教えて下さい。２つのプルダウンを連動させたいと考えていますが、単純に決められた項目を初期値として設定するようなプルダウンであれば問題なくできますが、テーブルから取得したデータをプルダウンにセットした後に制御を掛けたいと考えています。以下のようなソースを活用できないか？と考えていますが、どのような方法があるでしょうか。。。。《活用ソース》 <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=JavaScript>  </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>

yurix_1
お礼率38% (44/114)

PHP
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

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

ベストアンサー

hige_mario
ベストアンサー率51% (18/35)

2010/10/20 23:34 回答No.1

多分大阪を選んだら市町村のプルダウンに大阪分を、東京を選んだらその市町村をプルダウンに配置したいのだと思いますが、あってるのかな？その場合はページをDOM管理して都道府県のプルダウンが選択されたら、AJAXで市町村分のデータを受け取り、DOMでプルダウンの項目を書き換えるのが自然だと思います。ただし、AJAXやDOM管理には色々な知識が必要ですし、手間もかかります。もし、質問にある項目数の程度なら、全てページに埋め込みjavascriptで管理するほうが楽かもしれませんね。なので、多分PHPの質問というよりAJAXやDOMに詳しい人に聞くほうが答えが早く見つかるのかも。答えになってなく不安ですが・・・

関連するQ&A

連動するセレクトボックスの内容を増やしたい
お世話になります。現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが３つなのですが、７つの親と子のセレクトボックスを作りたいと思っています。 JavaScriptのどの部分を変えればいいのかどうかご教授お願いいたします。 <script type="text/javascript"> var parentArray = new Array('東京都','神奈川県','静岡県'); ////親セレクトボックスを配列から書き出し function autoOptions(){ var parent=parentArray.length; var selectNumber = document.getElementsByTagName("select").length; for(var j=0;j<=selectNumber/2-1;j++){ idName='parent_'+j; document.getElementById(idName).length=parent+1; for(var i=0;i<parent;i++){ document.getElementById(idName).options[i+1].text= parentArray[i]; } } } ////連動セレクトボックス function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; if(document.getElementById(idParent).selectedIndex==0){ document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; } else { document.getElementById(idChild).selectedIndex=0; document.getElementById(idChild).length=1; var child = childArray[document.getElementById(idParent).selectedIndex-1]; document.getElementById(idChild).length=child.length+1; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i+1].text= child[i]; } } } ////子セレクトボックスの配列 var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); </script>
- ベストアンサー
- JavaScript
プルダウンメニューの連動で・・・
function change(){ item_date = form.cat1.selectedIndex; item_value= form.cat1.options[item_date].value; var i; switch(item_value) { case "1": listArray = new Array(); listArray[0] = new Option("aaa","縺ゅ≠縺・quot;); listArray[1] = new Option("sss","www"); break; case "2": listArray = new Array(); listArray[0] = new Option("222","333"); listArray[1] = new Option("333","333"); listArray[2] = new Option("444","444"); listArray[3] = new Option("555","444"); break; } for(i=0;i < listArray.length;i++){ document.form.cat2.options[i] = listArray[i]; } } このようにしてみたのですが、 2を選択してから1を選択すると、2で選択した「444」と「555」が残ってしまいます。一度消してしまおうとしたのですが、document.form.cat2.reset();ではエラーが出てしまいます。(オブジェクトが選択されていない) どのようにしてクリアすれば良いのでしょうか？
- 締切済み
- JavaScript
プルダウンに追加項目を加える方法
過去記事にあった下記のプルダウンを使用させて頂いております。選択できる項目を「くだもの→りんご→●●」ともうひとつ追加するにはどうしたらよいのでしょうか？どうぞよろしくお願いします。 <html> <head> <script>  </script> </head> <body onLoad="initSel()"> 　<form> 　　<p> 　　　メイン：　　　<select name="selMain" size="1" onChange="changeSel()"></select> 　　</p> 　　<p> 　　　サブ：　　　<select name="selSub" size="1"></select> 　　</p> 　</form> </body> </html>
- 締切済み
- JavaScript
複数のプルダウンの連動とリンク
複数の連動するプルダウンを作成し、さらに最後のページをリンクで飛ばしたいのですが、java初心者のためそのように記述してよいのか分かりません。３つのプルダウンであれば他のページに記述例があったのですが、増やす時などにどこをいじればよいか分かりませんでした。下記ソースは他サイトからのものですが、最後のプルダウンにリンク貼れますか？他の記述でもかまいませんので教えてください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <script type="text/javascript"></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
2つのプルダウンを連動させて、selectedで選択状態にしたい
JavaScript初心者です。今、phpとMySQLとJavaScriptで車の情報を登録する画面を作っています。 1つのプルダウンが選択後、もうひとつのプルダウンを表示するのですが、入力画面から確認画面へ移って、history.backでもう一度入力画面にもどったときに、選択された状態で表示したいのです。下記のmakerは、値をセッションで受け取り、selectedをつける指示をしたので、選択状態にすることができました。もう一つのcarnameがどうしたらよいか分かりません。どうかご教授お願い致します。 <head> <script type="text/javascript">  </script> </head> <body> <form name="form1"> <select name="maker" onChange="setArea(this.selectedIndex)"> <option value="0"<?php echo $selected1?>>▼選択してください</option> <option value="1"<?php echo $selected1?>>トヨタ</option> <option value="2"<?php echo $selected2?>>ニッサン</option> </select> <select name="carname" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select> </form>
- 締切済み
- JavaScript
JavaScriptのセレクトボックスの連動について
JavaScriptにて連動するセレクトボックスを作成しました。ソースは下記となります。 ==================================================== <html> <head> <title>複数のSELECT タグ連動</title> <script type="text/javascript">  </script> </head> <body> <form name="myform" method="POST" action"#"> <select id="parent_0" onchange="selectBox(0)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_0"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_1" onchange="selectBox(1)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_1"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_2" onchange="selectBox(2)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_2"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> </form> </body> </html> ==================================================== 上記のソースで想定の動きをしてくれているのですが、例えば、神奈川県　小田原市と選択し、ブラウザの更新をかけると、神奈川県　渋谷区になってしまいます。ブラウザの更新をかけた際に、双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
２つのプルダウンの結果を別フレームへ
はじめまして。一方のフレームには２つのプルダウンを作りボタンクリックでその結果(リンク)をもう一方のフレームで表示させたいのですが、うまくいかず困ってます。どなたかよろしくお願いします。それぞれフレームの名前は、プルダウンのフレーム・・・・・top それを表示させたいフレーム・・und　　と付けました。プルダウンの方のソースは以下のようになってます。  <form name="doublecombo" > <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)"> <option>月曜日</option> <option>火曜日</option> </select><br><br> <select name="stage2" size="1"> <option>時限選択</option> </select><br><br> <input type="button" name="test" value="時間割" onClick="go()" > </p> <script>  </script>
- 締切済み
- JavaScript
PHP+Ajaxでプルダウンの連動
お世話になっております。久しぶりですが、わからないところが出てきたので、質問させてくださいませ。現在、PHP+MySQLでホームページを作っています。 A(大カテゴリ)、B(小カテゴリ)のそれぞれのプルダウンを持っていて、 MySQL上では、BはどのAに所属しているかが格納されています。その上で、 PHPソース <script type="text/javascript" src="ajax.js"></script> Aの部分 <select name="category" id="category" onChange="changePack(this)"> <option value="">--</option> <option value="1">A-1</option> <option value="2">A-2</option> <option value="3">A-3</option> </select> Bの部分 <select name="pack" id="pack"> <option value="">--</option> </select> Ajax部分のソース // 検索結果画面初期表示用 function setList() { var Category = "0"; var Pack = "0"; setPackOption(Category); document.rsv_input.category.selectedIndex = 0; document.rsv_input.pack.selectedIndex = 0; } // カテゴリ選択時 function changePack(Category) { var Category; getResult(Category.value); } function getResult(Category) { //XMLHttpRequestオブジェクト生成 var xmlhttp = createHttpRequest(); if (xmlhttp == null) { return null; } var data = ""; data += "category=" + Category; sendRequest(xmlhttp, "POST", "result.php", false, data, callBack); } function callBack(xmlhttp) { var result = xmlhttp.responseText; var resArray = result.split(","); for (i=0; i<resArray.length; i++) { var packArray = resArray[i].split("/"); document.rsv_input.pack.options[i] = new Option(packArray[1], packArray[0]); } } relust.phpのソース $category = ( $_POST["category"] != "0" )? $_POST["category"] : ''; select文で「$category」を持つ、レコードから「小カテゴリ」のid、名称を取得 $id = $Cols['id']; $name = $Cols['name']; $data .= ',' . $id . '/' . $name; echo($data); としておりますが、小カテゴリのプルダウンに$dataの中身が反映されません。(result.phpの$_POSTを$_GETに変更して単体で動かした場合は、$dataが読み取れる状態になります。) http://www.okushin.co.jp/information/Ajax_report/06_sample02.php を参考にさせていただいていますが、プルダウンの総数が違う。や、最終結果をテキストデータとしてhtml中に書き出すなど若干の相違点でつまずいています。当方、PHP(0.5年)、JavaScript(0.5年)位の経験しか持ち合わせていないので、余計にわかってないだけかも知れません。お手数をおかけいたしますが、修正箇所の指摘やその方法などを教えていただけませんでしょうか。よろしくお願いいたします。
- ベストアンサー
- PHP
連動するプルダウンリストの作成
他にも似たような質問があるのですが、連動するプルダウンリストを作成しています。二次元配列を使ったものはあるのですが、三次元以上の多次元配列を使ったものがないので質問させて頂きました。下記のような内容でエリアと都道府県を選択できるプルダウンリストがあります。これをJavascriptの三次元配列を利用してさらに市町村を選択できるリストを作成したいと思っています。それぞれのプルダウンリストは、エリアの中でAを選択するとAのエリアの中にある都道府県が選択でき、都道府県を選択するとそれに該当する市町村が選択できるように連動するように作成したいと思っています。ご指導お願いします。 <html> <head> <script language="javascript"></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
javascriptでプルダウンメニューの外部ファイル化について
以下のjavascriptを外部ファイルにしたいのですが、外部ファイル、HTML部分ともに、どのように記述すればいいのか教えて頂けませんでしょうか？よろしくお願いします。 <html> <head> <script language="JavaScript">  </script> </head> <body onLoad="Load();"> <form name="the_form" method="POST" action="" onSubmit="return Check()"> <select name="choose_category" onChange="swapOptions(window.document.the_form.choose_category.options[selectedIndex].text);"> <OPTION value="果物" selected>果物 <OPTION value="野菜" >野菜 <OPTION value="肉" >肉 <OPTION value="魚" >魚 <OPTION value="酒" >酒 <OPTION value="菓子" >菓子 </select> <select name="the_examples"> <OPTION value="0" selected>りんご <OPTION value="1" >いちご <OPTION value="2" >みかん <OPTION value="3" >ドリアン <OPTION value="4" >ライム </SELECT> <from> </body> </html> また、次のサイト（http://www.carsensor.net/）では「メーカー・地域・価格から探す」からメーカー選択後、車名部分ではそのメーカーに該当するものが選択できますが、これは上の方法とは違うように思うのですが、どういった方法なのでしょうか？
- ベストアンサー
- JavaScript