easyui combobox介紹：

組合框（combobox）顯示一個可編輯的文字框和下拉列表，使用者可以從下拉列表中選擇一個或多個值。使用者可以直接輸入文字到列表的頂部， 或者從列表中選擇一個或多個現成的值。

1.用法：

（1）：從帶有預定義結構的 <select> 元素建立組合框（combobox）。

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>
 

（2）：從 <input> 標記建立組合框（combobox）

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">

（3）： 使用 javascript 建立組合框（combobox）

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});
 

（4 ）：json資料例項：

[{
    "id":1,
    "text":"text1"
},{
    "id":2,
    "text":"text2"
},{
    "id":3,
    "text":"text3",
    "selected":true
},{
    "id":4,
    "text":"text4"
},{
    "id":5,
    "text":"text5"
}]

主要說一些常用的屬性： 1.valueField:繫結在組合框（Combobox）的value上的基礎資料的值。比如上面json資料中的'id'欄位的值。

可通過setValue方法設定組合框的value值。例如：

$('#cc').combobox('setValue','title');

注：title:是要設定的value值。 可通過 getValue方法取得組合框的value值。

$('#cc').combobox('getValue');

2.TextField:繫結在組合框（Combobox）的text上的基礎資料的值，其實就是能夠在頁面上看到的text. 也可通過setText方法設定組合框的text值。 通過getText獲取組合框的text值。 3.使用jquery Ajax載入combobox值。 首先要保證combobox的valueField和textField對應伺服器返回的json資料的key值。 然後使用：

$('#cc').combobox('loadData',data);

注：data代表返回的json資料
第一篇先說到這，歡迎留言，後續還會繼續介紹屬性和方法