ComboBox( 下拉列表框)

一． 加载方式
//class 加载方式
<select id="box" class="easyui-combobox" name="box"
style="200px;">
<option value="aaaa">aaaa</option>
<option value="bbbb">bbbb</option>
<option value="cccc">cccc</option>
<option value="dddd">dddd</option>
<option value="eeee">eeee</option>
</select>
//JS 加载方式
<input id="box" name="user">
$('#box').combobox({
valueField : 'id',
textField : 'user',
url : 'content.json',
});

二．属性列表

//部分属性
$('#box').combobox({
valueField : 'id',
textField : 'user',
//url : 'content.json',
url : 'user.php',
groupField : 'gender',
groupFormatter: function(group){
return '<span style="color:red">' + group + '</span>';
},
mode : 'remote',
});

//部分属性
$('#box').combobox({
valueField : 'label',
textField : 'value',
data : [{
label : 'java',
value : 'java',
}, {
label : 'C#',
value : 'C#',
}]
});
//部分属性
$('#box').combobox({
valueField : 'id',
textField : 'user',
//url : 'content.json',
url : 'user.php',
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) >= 0;
},
formatter: function(row){
var opts = $(this).combobox('options');
return '[' + row[opts.textField] + ']';
},
});

三．事件列表

//部分事件
$('#box').combobox({

onSelect : function () {
//alert('选定项时触发！');
},
onUnselect : function () {
alert('选定后触发！');
},
});

三．方法列表

//部分方法
console.log($('#box').combobox('getData'));
$('#box').combobox('loadData', [
{
"id" : 1,
"user" : "蜡笔小新",
"email" : "xiaoxin@163.com",
"group" : "男",
"date" : "2014-10-1"
},
{
"id" : 2,
"user" : "樱桃小丸子",
"email" : "xiaowanzi@163.com",
"group" : "女",
"date" : "2014-10-2"
},
{

"id" : 3,
"user" : "黑崎一护",
"email" : "yihu@163.com",
"group" : "男",
"date" : "2014-10-3"
}
]);
$('#box').combobox('reload');
$('#box').combobox('reload', 'content.json');
$('#box').combobox('setValue', '001');
$('#box').combobox('unselect', 1);