ajax:select(サンプル)

JSP

部署:<select id="dept">
	...
	</select><br/>

社員:<select id="emp">
	...
	</select>
...
<ajax:select
	baseUrl="Select.view"
	source="dept"
	target="emp"
	emptyFunction="empty"
	parameters="deptno={dept}"
/>

下位の選択肢はAjaxを使った通信で取得します。その取得先をbaseUrlで指定しています。サーバーサイドプログラムは、どんな実装でもOKです。
sourceが上位のselectタグで、targetが下位のselectタグです。ここで指定するのはnameではなくIDで指定するので注意します。
parametersがbaseUrlに対してリクエストするときのパラメータです。

Ajax通信によって、選択肢を取得し1件もなかった時は、下位のselectタグが空になって欲しいところですが、なぜかなりません。空にする処理と、下位の選択肢を使用不可にする処理をemptyFunctionとして作成しました。


function empty(){
	with(document.getElementById("emp")){
		options.length = 0;
		options[0] = new Option("---", "");
		disabled = true;
	}
}

Servlet

サーバーサイドプログラムは、BaseAjaxServletを継承して作っています。(実装はなんでも構いません)
autocompleteの時と、ほとんど同じつくりで、AjaxXmlBuilderを使って、Beanが格納されたListから、XMLデータを作成しています。

//EmpBeanのリストを取得する
List list = getList(ds, deptno);
return new AjaxXmlBuilder().addItems(list, "ename", "empno").toString();

上位の選択肢で選んだ値を取得し、それを検索条件にDB検索しています。

サンプルプログラム(ソースつき)

データはHSQLDBから検索しています。インプロセスで動作するWebアプリケーションとして作成したので、webappsフォルダに放り込めば、すぐに動作確認できます。


http://localhost:8080/AjaxTagLibStudy/のようにアクセスすれば、各サンプルが実行できます。


コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)