• ベストアンサー

セレクトボックスの連動について

https://secure.sakura.ad.jp/member/password.php こちらのページにあるように「都道府県」を選択すると 一度リロードされ、選択された「都道府県」に基づく 「市区町村」のセレクトボックスが表示されるようになります。 おそらく、セレクトボックスに「onchange」イベントハンドラを つけて、処理しているかと思いますが、具体的な方法が 分かりません。 どなたか分かる方、教えて頂けますでしょうか？

  • SOU48
  • お礼率35% (51/144)
  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • satoz
  • ベストアンサー率40% (12/30)
回答No.1

ソースを見れば判ります。 単純なというか、良くあるつくりですが、 onchangeにて同一プログラムにPOSTして、表示を 変化させているだけですね。 市町村リストをDBから取得しているのか、 ファイルから取得しているのか、 実はハードコーディングなのかわかりませんけどね。 普通はDBから取得してきそうですが。

SOU48
質問者

お礼

ありがとうございます。 同一プログラムにPOSTすることで実現しているのですね。 ところでもしご存じでしたら教えて頂きたいのですが、 onchangeにて同一プログラムにPOSTする方法は 具体的にどのようになるでしょうか？ または参考サイトなどご存じでしたら教えてください。 宜しくお願い致します。

その他の回答 (1)

  • satoz
  • ベストアンサー率40% (12/30)
回答No.2

HTMLでということであればDHTMLというかjavascriptを使って参考URLのようにも作れます。

参考URL：
http://okwave.jp/kotaeru.php3?q=646029
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • PHPのみで、動的なセレクトボックスの実現方法 携帯サイト

    PHP5.1.2 smarty html_options利用 携帯サイトにて、1つのセレクトボックスを選択すると、 2つめのセレクトボックスが動的に変わるということを実現したいです。 携帯サイトなので、javascriptは利用不可です。 よくある、都道府県を選択するとその市区町村が出てくる というようなものです。 実現方法について教えてください。 PHPでsubmitしたことにすることはできるのでしょうか？

    • 締切済み
    • PHP
  • onchange等のイベントハンドラによる同一ページへのPOSTについて

    あるWebページ内のセレクトボックス1，2があるとします。 セレクトボックス1に対して、onchangeイベントハンドラを設けて セレクトボックス1の内容が変更されれば、リロードし 同一ページへセレクトボックス1の内容をPOSTし、 その受け取った内容でセレクトボックス2の内容を 可変したいのですが、具体的にJavascriptからPOST変数への 受け渡し方はどのようになるのでしょうか？ WebページはPHPにて構築しています。 すみませんがご存じでしたらどなたか教えてください。

  • 連動させたいセレクトボックスについて。

    こんにちは。DB＋PHPが初心者のものです。 前にもここで質問させていただきましたが、 自分なりにコードを書いてみたので コードの訂正、ご教授をよろしくお願いいたします。 セレクトボックス1には、[table 1]の、種類が入り れレクトボックス2には、[table 1]の種類に連動して、[table 2]の名前が選択できるようにする。 下記のようにソースを書いてみましたが、 table１の値は、セレクトボックスでちゃんと表示されますが、table2はセレクトボックスは表示されるものの、何も値がありません(T_T) 動きとしては、table1のセレクトボックスで選択したら、その項目をDBへ問い合わせ、その項目に対応した、DBに登録されているtable2の値を二つ目のセレクトボックスに表示させたいです。 <html> <body> <select name="mkoumoku"> <option selected>-------------</option> <?php //DB接続 $dbcon=mysql_connect("localhost","abcd","defg"); //DB選択 mysql_select_db("zozozo"); //table1を取得 $res=mysql_query("select distinct * from table1"); while ($rows=mysql_fetch_array($res)) { echo "<option value=\"".$rows['id']."\">".$rows['kind']."\n"; } echo "</select>"; ?> <select name="skoumoku"> <option selected>-------------</option> <? //table1に連動して項目を変えたいところのコード $res1=mysql_query("select * from table2 where key =$_POST[mkoumoku] order by id"); while ($rows=mysql_fetch_array($res1)) { echo "<option value=\"".$rows['id']."\">".$rows['name']."\n"; } //Dbクローズ mysql_close($dbcon); ?> </body> </html>

    • ベストアンサー
    • PHP
  • セレクトボックスとテキストボックスの連動について

    セレクトボックスで質問事項を選ぶと、テキストボックスの中に選択した名称が表示される。ということをやりたく下記の様に設定しました。 <script> function hoge(obj){ var f=obj.form; var v=obj.options[obj.selectedIndex].value; var c=f.elements["comment"]; c.value+=v; obj.selectedIndex=0; } </script> <select name="質問事項1" onchange="hoge(this)"> <option value="selected">質問事項を選んでください</option> <option value=“質問1">質問1</option> <option value="質問2">質問2</option> <option value="質問3">質問3</option> </select> <textarea name="comment"></textarea> 現在発生している問題が1点あります。 セレクトボックスで質問を2回選ぶと、選んだ2つの結果がテキストボックス内に連続して表示されます。 例： 1回目 セレクトボックス内 「質問1」を選択 ↓ テキストボックス内 「質問1」が表示 2回目 セレクトボックス内 「質問2」を選択 ↓ テキストボックス内 「質問1質問2」と表示 2回目以降選んだ場合に前回の処理をクリアにして、1つのみ表示させたいと思うのですがどうやればいいのでしょうか。 よろしくお願いします。

  • AJAXでPHPの配列を用いたセレクトボックスの連動

    AJAXでPHPの配列を用いたセレクトボックスの連動を行いたいと思っています。たとえば、 PHPで配列をセットしセレクトボックスを生成します。 1番目のセレクトボックスで1番目の項目を選択すると 2番目のセレクトボックスの内容が連動して変化する。 といった動きを目指しています。 2番目のセレクトボックスの内容もPHPで持って設定したいと考えています。 1番目のセレクトボックスのvalue値が2ならばajaxで通信して21から29までのkeyの配列を設定するという形式ですが。どのようにして良いかわかりません。 教えて下さい。

    • ベストアンサー
    • AJAX
  • セレクトボックス ＨＴＭＬ javascript

    セレクトボックス ＨＴＭＬ javascript php セレクトボックスの複数選択についてですがご教授よろしくお願いいたします。たとえばセレクトボックスを二つ作り 一つ目のセレクトボックスを ・フルーツ ・寿司 ・カレー フルーツを選択すると二つ目のセレクトボックスの中が ・りんご ・みかん ・なし 寿司を選択すると二つ目のセレクトボックスが ・いくら ・まぐろ ・うに このように 一つ目のセレクトボックスの選択によって 二つ目のセレクトボックスの中身を変えるにはどのようなコードを組めば よろしいのでしょうか。 現在 php javascript mysqlの勉強しています。 ご教授いただければ幸いです。

    • ベストアンサー
    • HTML
  • セレクトで都道府県から市区町村を選択のしかた

    　セレクトが［都道府県］［市区町村］のふたつがあって、 都道府県選択すると、自動的に市区町村のセレクト内容が変わるってやつあるじゃないですか、あれってどうやってやるんでしょう？ 　いざ調べようと思ったら、そんなページどこにあるかわらなくて、ソースも見れないから、ちょっと困ってます。 　ちなみに、その場合、市区町村のデータって膨大ですよね、できればＣＳＶデータ（すでに制作済み）を活用したいのですができますでしょうか？

  • リストボックスを連動させて・・・

    <SCRIPT language=JavaScript> function set(){ ★ここが混乱状態 } </SCRIPT> <select name="s1" onChange="set()"> <OPTION SELECTED>↓【選択して下さい】</OPTION> <OPTION>big</OPTION> <OPTION>small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION SELECTED>↓【選択して下さい】</OPTION> <OPTION>red</OPTION> <OPTION>white</OPTION> </SELECT> リストボックス選択前のページが test.cgi?hinmei=denwa だとします。 上部のリストボックスを選択すると test.cgi?hinmei=denwa&s1=big と変わり さらに下部のリストボックスを選択すると test.cgi?hinmei=denwa&s1=big&s2=red と変わり さらに上部のボックスを変更すると test.cgi?hinmei=denwa&s1=small&s2=red のように変動させるものを作りたいのですが・・・。 ＃これに取り組んで相当時間を費やしていますが、能力が足りません。 ＃質問の仕方に自信なし (^^;

  • セレクトしたときに全て初期状態に戻ってしまいます。

    こんにちは。 先日、こちらでご教授いただいた者です。 調べたのですが、その部分についてのいい方法が見つからなかったので、新たに質問させていただきました。 同一ページにテキストフォームと、 3つのセレクトボックスがあり、 その3つのセレクトボックスのうち、2つは連動しますが、残り一つは連動しないようにしたいのですが。 現状は、2つの連動するセレクトボックスを選ぶと 全てが初期状態（未選択の状態）になってしまいます。こちらでご教授いただいた方法を使い、 連動する部分で、onChangeイベントを使っています。 また連動する部分で、一つ目の選択肢を選んだときに、一度mysqlへ問い合わせ、2つ目の項目をmysqlからもってきて表示しています。 連動するセレクトボックスの操作をしたときに 他のテキストフォームや、セレクトボックスが初期状態に戻らないようにするには、どのように改良すればよろしいでしょうか？どうかご教授くださいませ。 よろしくお願いいたします。 WinXP mysql4.0 php4.2 Apache1.3

    • ベストアンサー
    • PHP
  • セレクトメニューの4連動

    いつも参考にさせて頂いております。 javascript初心者です。 現在、javascriptにてセレクトメニューの4連動を作成しているのですが、4つ目のセレクトメニューを正常に動かすことが出来ません・・・。何とか3つまでは動くようになったのですが・・・。忙しいところを申し訳ありませんが、教えて下さい。 一つ目のセレクトで、地域の選択 二つ目のセレクトで、県の選択 三つ目のセレクトで、「プレイスポット」か「食事」の選択 四つ目のセレクトでは、 プレイスポット名(三つ目でプレイスポット選択時) お店名(三つ目で食事選択時) 上記したようにしたいのです。宜しくお願いします。 <html> <head> <script type="text/javascript"> <!-- var area=0; function setA(n) { aa=n; data1 = [ ["東京","神奈川"], ["大阪","神戸"], ]; len = document.form1.box_a.options.length; for(i=len-1; i>0; --i) document.form1.box_a.options[i] = null; if(n!=0) { document.form1.box_a.style.visibility = "visible"; for(i=0; i<data1[n-1].length; i++) document.form1.box_a.options[i+1] = new Option(data1[n-1][i]); } setB(0); } function setB(n) { data2 = [ [["プレイスポット","食事"],["プレイスポット","食事"]], [["プレイスポット","食事"],["プレイスポット","食事"]] ]; len = document.form1.box_b.options.length; for(i=len-1; i>0; --i) document.form1.box_b.options[i] = null; if(n==0)return; document.form1.box_b.style.visibility = "visible"; for(i=0; i<data2[aa-1][n-1].length; i++) document.form1.box_b.options[i+1] = new Option(data2[aa-1][n-1][i]); setC(0); } function setC(n) { data3 = [ [[["としまえん","よみうりランド"],["キハチ","久兵衛"]]], [[["江ノ島","鎌倉"],["カレーミュージアム","中華街"]]], [[["ユニバーサルスタジオ","天王寺動物園"],["かに道楽","金龍ラーメン"]]], [[["須磨海浜水族園","グリコピア"],["コンチェルト","六甲山牧場"]]] ]; len = document.form1.box_c.options.length; for(i=len-1; i>0; --i) document.form1.box_c.options[i] = null; if(n==0)return; document.form1.box_c.style.visibility = "visible"; for(i=0; i<data3[aa-1][n-1][n-1].length; i++) document.form1.box_c.options[i+1] = new Option(data3[aa-1][n-1][n-1][i]); } //--> </script> </head> <body> <form name="form1"> <select name="sel1" onChange="setA(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">関西</option> </select> <select name="box_a" onChange="setB(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_b" onChange="setC(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_c" onChange=""><option value="0" selected>---------------</option></select> </form> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する