版权声明:本文为博主原创文章,转载需注明来源 https://blog.csdn.net/fsxxzq521/article/details/78676337
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');
也可通过setText方法设置组合框的text值。 通过getText获取组合框的text值。
3.使用jquery Ajax加载combobox值。
首先要保证combobox的valueField和textField对应服务器返回的json数据的key值。
然后使用:
$('#cc').combobox('loadData',data);
注:data代表返回的json数据
第一篇先说到这,欢迎留言,后续还会继续介绍属性和方法