jQuery getJSON()でセレクトボックスの項目を動的生成

SAStruts アクションにJSONを返すメソッドを作成してみる - 130単位

前回の続きです。やりたいことは以下。

部署：部署1部署2 従業員：

• 2つのセレクトボックス
• 片方の選択により、Ajaxでもう片方の項目を動的生成

前回はSAStrutsでサーバー側のJSONを返す処理を作成しました。今回はクライアント側のJavaScriptです。jQueryを使います。getでJSONを取得するメソッドのリファレンスを確認します。

jQuery.getJson( url, data, callback )

HTTP(GET)通信でJSON形式のデータを読み込む。

no title

引数は順に、リクエストURL、パラメータ、コールバック関数、です。

これを、部署のセレクトボックスのonChangeイベントに設定します。

$("#departmentId")
    .change(function(){
        $("#employeeId").empty();

        var departmentId = $(this).val();
        if (departmentId == "") {
            return;
        }
        
        $.getJSON(
            "ajaxEmployeeList",
            {"departmentId" : departmentId},
            function(employeeList){
                var optionItems = new Array();
                optionItems.push(new Option("", ""));
                for (key in employeeList) {
                    optionItems.push(new Option(employeeList[key], key));
                }
                $("#employeeId").append(optionItems);
            });
    });

簡単に解説してみます。

1. 従業員のセレクトボックスを空にする
2. 選択中の部署idを取得 → 空白なら何もせず
3. getJSON()でAjaxリクエスト
   1. リクエストURLを指定
   2. 部署idをパラメータに指定
   3. 返されたJSON(従業員のid-nameのリスト)をセレクトボックスに設定

ちなみに上記コードのリクエストURLの指定は、SAStrutsでは同アクション内にメソッドを定義した場合です。URLの最後に"/"は入れても入れなくてもいいみたいです。

ただし、これだとFirefox等では動きますがIE6では動きません。

IEにjQueryでselectのoptionを追加できない - toyosystem
http://www.jamboree.jp/cms/archives/90

どうもIE6のバグでappend()がうまくいかないようです。というわけで、上記記事を参考にIE6に対応するようにしてみます。

IE6対応版

select要素のDOMを利用して、options[]プロパティに1つずつ追加していきます。

$.getJSON(
    "ajaxEmployeeList",
    {"departmentId" : departmentId}
    function(employeeList){
        var select = document.getElementById("employeeId");
        var i = 0;
        select.options[i++] = new Option("", "");
        for (key in employeeList) {
            select.options[i++] = new Option(employeeList[key], key);
        }
    });

IE6対応版その2

社内にあったとあるソースコードではこんなやり方をしていました。html文字列を配列に格納しておいて、最後に連結して追加しています。この場合だとjQueryのappend()が効くようです。

$.getJSON(
    "ajaxEmployeeList",
    {"departmentId" : departmentId},
    function(employeeList){
        var optionItems = new Array();
        optionItems.push('<option value=""></option>');
        for (key in employeeList) {
            optionItems.push('<option value="' + key + '">' + employeeList[key] + '</option>');
        }
        $("#employeeId").append(optionItems.join());
    });

jQueryクックブック

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践