组合框（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）、创建两个依赖的组合框（combobox）。
<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 数据格式的示例：
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]
2、属性
该属性扩展自组合（combo），下面是为组合框（combobox）添加的属性。
|
名称 |
类型 |
描述 |
默认值 |
|
valueField |
string |
绑定到该组合框（ComboBox）的 value 上的基础数据的名称。 |
value |
|
textField |
string |
绑定到该组合框（ComboBox）的 text 上的基础数据的名称。 |
text |
|
groupField |
string |
指示要被分组的字段。该属性自版本 1.3.4 起可用。 |
null |
|
groupFormatter |
function(group) |
返回要显示在分组项目上的分组文本。该属性自版本 1.3.4 起可用。 |
|
|
mode |
string |
定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务 器加载就设置为 'remote'。当设置为 'remote' 模式时，用户输入的 值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。 |
local |
|
url |
string |
从远程加载列表数据的 URL 。 |
null |
|
method |
string |
用来检索数据的 http 方法。 |
post |
|
data |
array |
被加载的列表数据。 |
null |
|
filter |
function |
定义当 'mode' 设置为 'local' 时如何过滤本地数据。该函数有两个参数： |
|
|
formatter |
function |
定义如何呈现行。该函数有一个参数：row。 |
|
|
loader |
function(param,success,error) |
定义如何从远程服务器加载数据。返回 false 则取消该动作。 该函数有下列参数： |
json loader |
|
loadFilter |
function(data) |
返回要显示的过滤数据。该属性自版本 1.3.3 起可用。 |
3、事件
该事件扩展自组合（combo），下面是为组合框（combobox）添加的事件。
|
名称 |
参数 |
描述 |
|
onBeforeLoad |
param |
在请求加载数据之前触发，返回 false 则取消加载动作。 |
|
onLoadSuccess |
none |
当远程数据加载成功时触发。 |
|
onLoadError |
none |
当远程数据加载失败时触发。 |
|
onSelect |
record |
当用户选择一个列表项时触发。 |
|
onUnselect |
record |
当用户取消选择一个列表项时触发。 |
4、方法
该方法扩展自组合（combo），下面是为组合框（combobox）添加或重写的方法。
|
名称 |
参数 |
描述 |
|
options |
none |
返回选项（options）对象。 |
|
getData |
none |
返回加载的数据。 |
|
loadData |
data |
加载本地列表数据。 |
|
reload |
url |
请求远程的列表数据。传 'url' 参数来重写原始的 URL 值。 |
|
setValues |
values |
设置组合框（combobox）值的数组。 |
|
setValue |
value |
设置组合框（combobox）的值。 |
|
clear |
none |
清除组合框（combobox）的值。 |
|
select |
value |
选择指定的选项。 |
|
unselect |
value |
取消选择指定的选项。 |
5、实例
（1）、基础组合
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic ComboBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../css/easyui.css"> <link rel="stylesheet" type="text/css" href="../css/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <h2>Basic ComboBox</h2> <p>Type in ComboBox to try auto complete.</p> <p style="margin:20px 0"></p> <select class="easyui-combobox" name="state" style="width:200px;"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> </select> </body> </html>
<喎?http://www.weiyer.com/Search.asp?KeyWord=/kf/ware/vc/" target="_blank" class="keylink">vcD4KPGgyPqOoMqOpPHN0cm9uZz6horbg0NDX6brPv/I8L3N0cm9uZz48L2gyPgo8cD48cHJlIGNsYXNzPQ=="brush:sql;"><pre name="code" class="html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Multiline ComboBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../css/easyui.css"> <link rel="stylesheet" type="text/css" href="../css/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <h2>Multiline ComboBox</h2> <p>This example shows how to create a multiline ComboBox.</p> <p style="margin:20px 0"></p> <select class="easyui-combobox" name="state" data-options="multiple:true,multiline:true" style="width:200px;height:50px"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> </select> </body> </html>
（3）、组合框组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Group ComboBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../css/easyui.css"> <link rel="stylesheet" type="text/css" href="../css/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <h2>Group ComboBox</h2> <p>This example shows how to display combobox items in groups.</p> <p style="margin:20px 0"> <input id="cc" class="easyui-combobox" name="browser" style="width:280px;" data-options=" url: 'combobox_data2.json', method: 'get', valueField:'value', textField:'text', groupField:'group' "> </body> </html>
（4）、多项选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Multiple Select - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../css/easyui.css"> <link rel="stylesheet" type="text/css" href="../css/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> </head> <body> <h2>Load Dynamic ComboBox Data</h2> <p>Drop down the panel and select multiple items.</p> <p style="margin:20px 0"></p> <input class="easyui-combobox" name="language" data-options=" url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', multiple:true, panelHeight:'auto' "> </body> </html>
（5）、组合框操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboBox Actions - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>ComboBox</h2>
<p>Click the buttons below to perform actions.</p>
<p style="margin:20px 0;">
<a href="javascript：void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
<a href="javascript：void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">GetValue</a>
<a href="javascript：void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">Disable</a>
<a href="javascript：void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">Enable</a>
</p>
<script type="text/javascript">
function setvalue(){
$.messager.prompt('SetValue','Please input the value(AL,AZ,UT,etc):',function(v){
if (v){
$('#state').combobox('setValue',v);
}
});
}
</script>
<select id="state" class="easyui-combobox" name="state" style="width:200px;">
<option value="AL">Alabama</option>
<option value="AK" selected>Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
</select>
</body>
</html>
