JavaScript複数のメニューを連動させる
Webシステムでよくあるのが、2つのプルダウンメニューを連動させるヤツ。1つめのプルダウンが国名で、それで「日本」を選択すると2番目のプルダウンが47都道府県になり、「アメリカ」を選択すると50州になるというもの。
それをJavaScriptで実現する方法が簡単にまとまっていたページ。そしてそれを若干改良したページ。
要は、2次元の連想配列を用意して、その値を用いてJavaScriptで動的に2番目のプルダウンの中身を変えるという物。特に難しい事はやってない。
自分の場合、それをちょっと改良して、JavaScriptのクラスを作成。コンストラクタでは親プルダウンと子プルダウンのNAME（もしくはID）属性を渡すようにして、汎用的に使えるようにした。
さらに、サーバーサイドのJavaでもクラスを作り、
class Pulldowns {
private List options;
public void addOption(String parentValue, String childValue, String label) { … };
}
private List
public void addOption(String parentValue, String childValue, String label) { … };
}
というようなものを用意しておき、それを以下のようにして使用。
Pulldowns pulldowns = new Pulldowns(“parent, “child”);
pulldowns.addOption(“JP”, “1”, “北海道”);
pulldowns.addOption(“JP”, “2”, “青森”);
pulldowns.addOption(“US”, “1”, “Alaska”);
pulldowns.addOption(“JP”, “1”, “北海道”);
pulldowns.addOption(“JP”, “2”, “青森”);
pulldowns.addOption(“US”, “1”, “Alaska”);
で、ついでにJSON形式で2次元の連想配列を書き出すメソッドをJSP側で呼び出すようにすれば、かなり楽ちん。
Pulldowns pulldowns = request.getAttribute(“pulldowns”);
<%= pulldowns.getJSONVals(); %>
<%= pulldowns.getJSONVals(); %>
詳しくは時間のある時にコードサンプルも交えて書こうと思う。
