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

最新推荐文章于 2025-05-18 14:59:34 发布

原创最新推荐文章于 2025-05-18 14:59:34 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载需注明来源, 文章不足,欢迎留言指正

jquery Easyui 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了EasyUI框架中的Combobox组件用法，包括从<select>元素、<input>标记及JavaScript创建Combobox的方法，并详细解释了valueField、textField等常用属性及如何使用jQuery Ajax加载数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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值。例如：