プルダウンデータを選択後、その関連項目を表示したい

Question

お世話になってます。

入力フォームなどで、プルダウンを選択後、その選択されたデータに関連する項目をチェックボックスで表示したいと考えていますが、ここ数日調べているものの検索キーワードが不適切なためか、望んでいるサイトにたどり着くことが出来ません。

※return check()にてPOST?するのではなく、ページ遷移することなく、その場で表示を継ぐ次と変えて行きたい。

添付画像がその例ですが、市区郡を選択後、そこに属する市町村がチェックボックスを含め表示されるようにしたいと考えてます。

これらデータはMyQSLにて管理しており、テーブルは都道府県、市区郡、市町村等それぞれ別のテーブルで構成され、基本的なサイトの設計はselect分などのスクリプトも含め、PHPで作成しています。

話を戻しますが、これら一連の動作はjavascriptで作ることが出来るのでしょうか？これまでjavascriptとは縁があまりなく、学んだことが無いのが現状です。恐れ入りますが、ご教示頂けると助かります。

もちろん、これら例を説明したサイトでも構いません。アドバイスのほど宜しくお願い申し上げます。

![イメージ説明]WIDTH:600

Answer 1

これらデータはMyQSLにて管理しており、テーブルは都道府県、市区郡、市町村等それぞれ別のテーブルで構成され、基本的なサイトの設計はselect分などのスクリプトも含め、PHPで作成しています。
話を戻しますが、これら一連の動作はjavascriptで作ることが出来るのでしょうか？

はい、可能です。

まず第一歩目としては、MySQLから取ってきたデータを

$data = json_encode($hogehage, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);

こんな感じでPHPのjson_encodeで、JSON化し、HTMLのヘッダー部分に

<script> var data = JSON.parse('{$data}'); </script>

として、出力します。そうするとHTMLが準備される過程で$dataがJSON.parse()されてJavaScriptのオブジェクト data に変換されるので、

select のonChangeイベントを契機としてdataオブジェクトを検査し、該当する市区郡内の市町村情報のみを表示する

という流れになります。

一つづつやっていけば意外と簡単です。
まず、フロント側のみに集中して、HTMLのヘッダーにJSONを手動でべた書きして動作するプログラムをつくるところから始めてはいかがでしょうか？

（本当はselectのonchangeイベントの度にAjaxで情報を取りに行きたいところです。）

Comments

[chapp]

luckerさん

はじめまして。ご親切なアドバイスをありがとうございます。

一連の流れに加え、説明を不わえて頂き有難うございます。

お恥ずかしながら難関なので、改め調べてみます。
また不明な際は質問させて下さい。

ありがとうございました。

Answer 2

ここ数日調べているものの検索キーワードが不適切なためか

"プルダウン 連動"で調べれば出てくると思いますよ。

あと、下記の２点について教えてください。

[質問１]
「青戸～四つ木」のような名前は、他の区も全部含めて何個くらいあるのでしょうか？

[質問２]
jQueryは使用可能でしょうか？

Comments

[chapp]

bigfatratさん

はじめまして。ご親切なアドバイスをありがとうございます。

まず質問の回答ですが、この部分は市区町村になるので、検討の余地はあると思いますが、全国を対象とした場合、118,000件ほどになるかと思います。

それとjQueryですが、サンプルソースを眺める程度でコードを書けるようなレベルではありません。

プルダウン連動ですね・・・今から改め調べてみます。
有難うございます！