### ComboBox（下拉列表框）
扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。
下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。
####
#### 依赖关系
-
[combo](#)
####
#### 使用案例
通过<select>元素创建一个预定义结构的下拉列表框。
1. **<select** id="cc" class="easyui-combobox" name="dept" style="width:200px;"**>**
1. **<option** value="aa"**>**aitem1**</option>**
1. **<option>**bitem2**</option>**
1. **<option>**bitem3**</option>**
1. **<option>**ditem4**</option>**
1. **<option>**eitem5**</option>**
1. **</select>**
<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>
通过<input>标签创建下拉列表框。
1. **<input** id="cc" class="easyui-combobox" name="dept"
1. data-options="valueField:'id',textField:'text',url:'get_data.php'" **/>**
<input id="cc" class="easyui-combobox" name="dept" data-options="valueField:'id',textField:'text',url:'get_data.php'" />
使用Javascript创建下拉列表框。
1. **<input** id="cc" name="dept" value="aa"**>**
<input id="cc" name="dept" value="aa">
1. $('#cc').combobox({
1. url:'combobox_data.json',
1. valueField:'id',
1. textField:'text'
1. });
$('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text' });
创建2个有依赖关系的下拉列表框。
1. **<input** id="cc1" class="easyui-combobox" data-options="
1. valueField: 'id',
1. textField: 'text',
1. url: 'get_data1.php',
1. onSelect: function(rec){
1. var url = 'get_data2.php?id='+rec.id;
1. $('#cc2').combobox('reload', url);
1. }" **/>**
1. **<input** id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" **/>**
<input id="cc1" class="easyui-combobox" data-options=" valueField: 'id', textField: 'text', url: 'get_data1.php', onSelect: function(rec){ var url = 'get_data2.php?id='+rec.id; $('#cc2').combobox('reload', url); }" /> <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />
JSON数据格式化例子：
1. [{
1. "id":1,
1. "text":"text1"
1. },{
1. "id":2,
1. "text":"text2"
1. },{
1. "id":3,
1. "text":"text3",
1. "selected":true
1. },{
1. "id":4,
1. "text":"text4"
1. },{
1. "id":5,
1. "text":"text5"
1. }]
[{ "id":1, "text":"text1" },{ "id":2, "text":"text2" },{ "id":3, "text":"text3", "selected":true },{ "id":4, "text":"text4" },{ "id":5, "text":"text5" }]
####
#### 属性
下拉列表框属性扩展自[combo](#)(自定义下拉框)，下拉列表框新增的属性如下：
<table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>valueField</td> <td>string</td> <td>基础数据值名称绑定到该下拉列表框。</td> <td>value</td></tr><tr><td>textField</td> <td>string</td> <td>基础数据字段名称绑定到该下拉列表框。</td> <td>text</td></tr><tr><td>groupField</td> <td>string</td> <td>指定分组的字段名称<font color="#3366ff">（译者注：分组的字段由数据源决定）</font>。<strong><font color="#ff0000">（该属性自1.3.4版开始可用）</font></strong></td> <td>null</td></tr><tr><td>groupFormatter</td> <td>function(group)</td> <td><font color="#ff0000"><font color="#000000">返回格式化后的分组标题文本，以显示分组项</font><strong>（该属性自1.3.4版开始可用）<br/></strong> <p><font color="#000000">代码示例：</font></p><pre>$('#cc').combobox({
groupFormatter: function(group){
return '<span style="color:red">' + group + '</span>';
}
});</pre><img src="image/578d9126f0b7a.png"/></font></td> <td/></tr><tr><td>mode</td> <td>string</td> <td>定义了当文本改变时如何读取列表数据。设置为'remote'时，下拉列表框将会从服务器加载数据。<span lang="zh-CN" id="result_box" class="short_text" a="undefined" c="4" closure_uid_262891198="125"><span closure_uid_262891198="256">当设置为</span><span class="atn" closure_uid_262891198="257">“remote”</span><span closure_uid_262891198="258">模式时</span><span closure_uid_262891198="260">，用户输入将被发送到名为'q'的HTTP请求参数到服务器检索新数据。</span></span></td> <td>local</td></tr><tr><td>url</td> <td>string</td> <td>通过URL加载远程列表数据。</td> <td>null</td></tr><tr><td>method</td> <td>string</td> <td>HTTP方法检索数据(POST / GET)。</td> <td>post</td></tr><tr><td>data</td> <td>array</td> <td>数据列表加载。 <p>代码示例：</p><pre><input class="easyui-combobox" data-options="
valueField: 'label',
textField: 'value',
data: [{
label: 'java',
value: 'Java'
},{
label: 'perl',
value: 'Perl'
},{
label: 'ruby',
value: 'Ruby'
}]" />
</pre></td> <td>null</td></tr><tr><td>filter</td> <td>function</td> <td>定义当'mode'设置为'local'时如何过滤本地数据，函数有2个参数：<br/>q：用户输入的文本。<br/>row：列表行数据。<br/>返回true的时候允许行显示。 <p>代码示例：</p><pre>$('#cc').combobox({
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;
}
});
</pre></td> <td/></tr><tr><td>formatter</td> <td>function</td> <td>定义如何渲染行。该函数接受1个参数：row。 <p>代码示例：</p><pre>$('#cc').combobox({
formatter: function(row){
var opts = $(this).combobox('options');
return row[opts.textField];
}
});
</pre></td> <td/></tr><tr><td>loader</td> <td>function(param,success,error)</td> <td>定义了如何从远程服务器加载数据。返回false可以忽略该动作。该函数具备如下参数：<br/>param：传递到远程服务器的参数对象。<br/>success(data)：在检索数据成功的时候调用该回调函数。<br/>error()：在检索数据失败的时候调用该回调函数。</td> <td>json loader</td></tr><tr><td>loadFilter</td> <td>function(data)</td> <td>返回过滤后的数据并显示。<strong><font color="#ff0000">（该属性自1.3.3版开始可用）</font></strong></td> <td/></tr></tbody></table>
#### 事件
下拉列表框事件继承自[combo](#)(自定义下拉框)，下拉列表框新增的事件如下：
<table class="doc-table"><tbody><tr><th><strong>事件名</strong></th> <th><strong>事件参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onBeforeLoad</td> <td>param</td> <td>在请求加载数据之前触发，返回false取消该加载动作。 <p>代码示例：</p><pre>// 在加载服务器数据之前改变http请求参数的值
$('#cc').combobox({
onBeforeLoad: function(param){
param.id = 2;
param.language = 'js';
}
});
</pre></td></tr><tr><td>onLoadSuccess</td> <td>none</td> <td>在加载远程数据成功的时候触发。</td></tr><tr><td>onLoadError</td> <td>none</td> <td>在加载远程数据失败的时候触发。</td></tr><tr><td>onSelect</td> <td>record</td> <td>在用户选择列表项的时候触发。</td></tr><tr><td>onUnselect</td> <td>record</td> <td>在用户取消选择列表项的时候触发。</td></tr></tbody></table>
#### 方法
下拉列表框扩展自[combo](#)(自定义下拉框)，下拉列表框新增或重写的方法如下：
<table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>getData</td> <td>none</td> <td>返回加载数据。</td></tr><tr><td>loadData</td> <td>data</td> <td>读取本地列表数据。</td></tr><tr><td>reload</td> <td>url</td> <td>请求远程列表数据。通过'url'参数重写原始URL值。 <p>代码示例：</p><pre>$('#cc').combobox('reload'); // 使用旧的URL重新载入列表数据
$('#cc').combobox('reload','get_data.php'); // 使用新的URL重新载入列表数据
</pre></td></tr><tr><td>setValues</td> <td>values</td> <td>设置下拉列表框值数组。 <p>代码示例：</p><pre>$('#cc').combobox('setValues', ['001','002']);
</pre></td></tr><tr><td>setValue</td> <td>value</td> <td>设置下拉列表框的值。 <p>代码示例：</p><pre>$('#cc').combobox('setValue', '001');
</pre></td></tr><tr><td>clear</td> <td>none</td> <td>清除下拉列表框的值。</td></tr><tr><td>select</td> <td>value</td> <td>选择指定项。</td></tr><tr><td>unselect</td> <td>value</td> <td>取消选择指定项。</td></tr></tbody></table>
- jQuery EasyUI 1.4 版 API 中文版 (Made By Richie696)
- 文档说明
- 汉化说明
- EasyUI更新说明
- Base(基础)
- parser(解析器)
- easyloader(简单加载)
- draggable(拖动)
- droppable(放置)
- resizable(调整大小)
- pagination(分页)
- searchbox(搜索框)
- progressbar(进度条)
- tooltip(提示框)
- Layout(布局)
- panel(面板)
- tabs(选项卡)
- accordion(分类)
- layout(布局)
- Menu and Button(菜单和按钮)
- menu(菜单)
- linkbutton(按钮)
- menubutton(菜单按钮)
- splitbutton(分割按钮)
- Form(表单)
- form(表单)
- validatebox(验证框)
- textbox(文本框)
- combo(自定义下拉框)
- combobox(下拉列表框)
- combotree(树形下拉框)
- combogrid(数据表格下拉框)
- numberbox(数值输入框)
- datebox(日期输入框)
- datetimebox(日期时间输入框)
- datetimespinner(日期时间微调框)
- calendar(日历)
- spinner(微调)
- numberspinner(数字微调)
- timespinner(时间微调)
- slider(滑动条)
- filebox(文件框)
- Window(窗口)
- window(窗口)
- dialog(对话框窗口)
- messager(消息窗口)
- DataGrid and Tree(表格和树)
- datagrid(数据表格)
- propertygrid(属性表格)
- tree(树)
- treegrid(树形表格)
- Extension(扩展)
- Portal(门户)
- DataGrid View(数据表格展示)
- Editable DataGrid(可编辑表格)
- Editable Tree(可编辑树)
- DataGrid Filter Row(可过滤行的数据表格)
- Drag and Drop Rows in DataGrid(可拖放行的数据表格)
- Drag and Drop Rows in TreeGrid(可拖放行的树形表格)
- DWR Loader(DWR装载器)
- RTL Support(RTL支持)
- Ribbon(Ribbon界面)