Skip to content

JavaScript複数のメニューを連動させる

JavaScript複数のメニューを連動させる published on 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) { … };
}

というようなものを用意しておき、それを以下のようにして使用。

Pulldowns pulldowns = new Pulldowns(“parent, “child”);
pulldowns.addOption(“JP”, “1”, “北海道”);
pulldowns.addOption(“JP”, “2”, “青森”);
pulldowns.addOption(“US”, “1”, “Alaska”);

で、ついでにJSON形式で2次元の連想配列を書き出すメソッドをJSP側で呼び出すようにすれば、かなり楽ちん。

Pulldowns pulldowns = request.getAttribute(“pulldowns”);
<%= pulldowns.getJSONVals(); %>

詳しくは時間のある時にコードサンプルも交えて書こうと思う。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です