easyui combobox组合框使用简介（一）

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数据

第一篇先说到这，欢迎留言，后续还会继续介绍属性和方法