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フォルダに放り込めば、すぐに動作確認できます。
https://app.box.com/shared/dyn789y99y
http://localhost:8080/AjaxTagLibStudy/のようにアクセスすれば、各サンプルが実行できます。