jQuery EasyUI のコンボボックス(ComboBox)を使う

jQuery EasyUI のコンボボックス(ComboBox)を使うサンプル。
xtesteasyui.html

• コンボボックスを用意する

<!-- HTML -->
<input id="comboboxA" class="easyui-combobox" data-options=""></input>

あらかじめHTMLのinput要素として用意しておく。

• 表示するデータを用意する

// JavaScript
var gDataComboboxA = [
    { id: '0', value: 'Java' },
    { id: '1', value: 'c++' },
    { id: '2', value: 'perl' } ];

コンボボックスに必要なデータを「オブジェクトの配列」として用意する。属性(フィールド)はいくつでもよく、また属性名は任意で可。(初期化の際にマッピングする。)

• 表示用データとコンボボックスを紐付ける

// JavaScript
$('#comboboxA').combobox({
    valueField: 'id',
    textField: 'value',
    data: gDataComboboxA
});

コンボボックスの初期化時にデータとの紐付けを行う。具体的には「表示される値」を’textField’で、「取得時の値」を’valueField’で指定する。(両者は同じでも可。)
上記の例では、コンボボックスには’Java’,'c++’…が表示され、Javaを選択すると値’0′が、c++を選択すると値’1′が得られる。なお、これはHTMLで以下のように書いても同じ。

<!-- HTML -->
<input id="comboboxA" class="easyui-combobox" 
   data-options="valueField:'id',textField:'value'" /> 

• 複数選択オプション

// JavaScript
$('#comboboxA').combobox({
   multiple: true
});

multipleオプションをtrueに設定することで、複数選択可能になる。これは以下のHTMLと等価。

<!-- HTML -->
<input id="comboboxA" class="easyui-combobox" data-options="multiple:true"></input>

• 値の取得

// JavaScript
$('#comboboxA').combobox('getValue') // single select
($('#comboboxB').combobox('getValues')).join(',') // multi select

コンボボックスの値を取得するには、getValue()メソッド、またはgetValues()メソッドを使う。前者は単一選択用で、後者は複数選択可とした場合用で、結果は配列で返ってくる。上記の例ではjavascriptのjoin()関数を使って、カンマ区切りの文字列に変換している。

• 値の追加

// JavaScript
$.messager.prompt('Add Value','Please input value:',function(v){
    if (v){
        var item = new Object();
        item.id = v; // input value
        item.value = v;
        gDataComboboxA.push(item); 
        $('#comboboxA').combobox({
            data : gDataComboboxA
        });
        $('#comboboxA').combobox('setValue',v);
    }
});