連動プルダウンを楽に作成 | 社内ITゲリラがWebで世界をめざす

社内ITゲリラがWebで世界をめざす

ITを仕事に活かし媚びないサラリーマン生活を、さらに別世界(Web/海外)に拠点を築くことでサバイバル力Upを目指す。Webの可能性を信じ、サービス立ち上げ等画策していきます。

Webのフォーム画面では1つ目のプルダウン(セレクトボックス)の選択内容に応じて2つ目のプルダウンの選択内容が連動して変化するものが時々見受けられます。

英語では cascading select, nested select などとも言います。

例えば、国を選択するとその国の都市が選択できるといった感じです。
これを実現するにはどうすればよいでしょうか?
(※下記は連動しません)




よくある例ではPHPファイルに接続してDBからデータを取得後、JSON形式で帰ってきたデータをSELECTに入れる、といった感じですがこれだとちょっと身構えますよね。

外部に接続等しないでもっと簡単に出来る方法はないでしょうか?

PHP & JavaScript Roomで紹介されている
jQuery controlled Dependent (or Cascading) Select List 2が良さそうです。

2番目(連動する方)のSELECTタグのclassを「sub_ + 1番目の値」とすることで、外部データに接続することなく連動が実現できます。わかりやすくて良いですね!

内部的には、元のSELECTの見えないコピー(クローン)を作成し、1番目の選択内容に応じて必要な項目をここからコピーしている感じです。

作成例はこちらです。