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フォルダに放り込めば、すぐに動作確認できます。

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

コメントを残す

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

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

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