jQuery-easyUIのcomboboxを使う

jQueryは幅広く使われているJavaScriptライブラリで、プラグインも豊富です。
UIを作る上でeasyUIが便利だな～と感じております。
ajaxでフォームの値を書き換える事はよくありますが、easyUIのサンプルがなかったためメモします。

JSP

入力フォームは以下のように作ります。
・ 「data」 ：コンボボックスに並べるデータをjsonで設定します
・「valueField」：フォームのバリューとするjson項目を指定します
・ 「textField」 ：フォームの表示とするjson項目を指定します

<input id="id" name="name" class="easyui-combobox" data-options="
                valueField: 'id',
                textField: 'name',
                data: ${jsonData}" style="required:false    "/>

JavaScript

Ajaxでサーバーに非同期通信し、受信結果をcomboboxに反映します。

・「$("#id").combobox("clear");」：コンボボックスをクリアする
・「$("#id").combobox("loadData",jsonData);」：サーバから受信したJSONデータをcomboboxに反映する

$("#id").combobox({
            onChange: function (n,o){
                $.ajax({
                    type:"post",
                    url: 'sampleURL',
                    dataType: "json",
                    data: {
                        id: $("#id").combobox("getValue")
                    },
                    success:function(data){
                        var jsonData = data[0].data;
                        $("#id").combobox("clear");
                        $("#id").combobox("load Data",jsonData);
                    },
                    error:function(data){
                        return false;
                    }
                });
            }
        });