ajax:select(サンプル)

JSP

部署:

社員:
...


下位の選択肢は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/のようにアクセスすれば、各サンプルが実行できます。

コメントを残す

メールアドレスが公開されることはありません。

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください