セレクトボックスの選択値によって表示するフォームフィールドを変える – 例えば地域エリアと都道府県のように…

 

ざっくり言って、↑ こんな感じのものです。

地域エリアフィールドで北海道東北を選ぶと、都道府県フィールドのリストが北海道東北の都道府県になり、関東を選ぶと関東の都道府県になり… ってものです。

仕組みとしては、もともと北海道東北以外の都道府県フィールドは、display:none で非表示にしてあり、地域エリアフィールドの値が変更されると、該当する都道府県フィールドを display:block にするというスクリプトを呼び出しています。

スクリプトは、こんな感じ。これを<head>内に埋め込みます。

HTMLはこんな感じ

 

私は、高速化が期待できるのと、楽チンだからという理由で、jquery を読み込むには、Google から提供されているライブラリを、CDN(Content Delivery Network)を利用して読み込んでいます。

Googleから提供されているCDNライブラリの最新バージョンや読み込み方の確認は ↓ コチラ

Hosted Libraries | Hosted Libraries | Google Developers