Weblasts

47都道府県対応!!セレクトボックスから都道府県を選択し、動的に対応する市区町村のセレクトボックスを生成する

不動産系サイトやチェーン展開している飲食店のサイトでよく見られるセレクトボックスから都道府県を選択後に、選択した都道府県に対応した市区町村を選択するためのセレクトボックスを動的に生成するやつを作った備忘録的なもの。

配列になっていたほうが個人的に楽だったので、47都道府県・市区町村対応の配列も用意してみました

デモ

冒頭で説明したとおり、動的にセレクトボックスの項目を変更していきます

スタバがおしゃれでだったのでそれっぽくしていますが、あちらは店舗がある地域だけ出てくるのに対して、ここで紹介するものは全部出てきます。

スタバ風デモ

作り方

PHPと組み合わせて作るほうがなんとなく良さそうですが、ここではJS(jQuery)だけで作りました。

ベースとなるHTMLはこちら

まずは都道府県と市区町村のデータをまとめた配列を用意します。

使いやすいように政令指定都市に関しては市のみと、市と区のものを用意、ただ全て正しいとは言えないので自己責任で

こいつとfor文を使って都道府県用のセレクトボックスを作ります。

都道府県が選択されたときに市区町村用のセレクトボックスがフェードインしてくるように消す処理もしておきます

都道府県のセレクトボックスが変更されたときの処理も作ります

こちらは「$.each」を使ってループさせます

後は合体させるだけ