ComboBox（下拉列表框）

擴充套件自$.fn.combo.defaults。使用$.fn.combobox.defaults重寫預設值物件。

下拉列表框顯示一個可編輯文字框和下拉式列表，使用者可以選擇一個值或多個值。使用者可以直接輸入文字到列表頂部或選擇一個或多個當前列表中的值。

依賴關係

• combo

使用案例

通過<select>元素建立一個預定義結構的下拉列表框。

1. <select id="cc" class="easyui-combobox" name="dept" style="width:200px;">  
2.     <option value="aa"
   >aitem1</option>  
3.     <option>bitem2</option>  
4.     <option>bitem3</option>  
5.     <option>ditem4</option>  
6.     <option>eitem5</option>  
7. </select>  

通過<input>標籤建立下拉列表框。

1. <input id="cc" class="easyui-combobox" name="dept"  
2.     data-options
   ="valueField:'id',textField:'text',url:'get_data.php'" />  

使用Javascript建立下拉列表框。

1. <input id="cc" name="dept" value="aa">  

1. $('#cc').combobox({   
2.     url:'combobox_data.json',   
3.     valueField:'id',   
4.     textField:'text'  
5. });  

建立2個有依賴關係的下拉列表框。

1. <input id="cc1" class="easyui-combobox"
    data-options="   
2.         valueField: 'id',   
3.         textField: 'text',   
4.         url: 'get_data1.php',   
5.         onSelect: function(rec){   
6.             var url = 'get_data2.php?id='+rec.id;   
7.             $('#cc2').combobox('reload', url);   
8.         }" />  
9. <input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />  

JSON資料格式化例子：

1. [{   
2.     "id":1,   
3.     "text":"text1"  
4. },{   
5.     "id":2,   
6.     "text":"text2"  
7. },{   
8.     "id":3,   
9.     "text":"text3",   
10.     "selected":true  
11. },{   
12.     "id":4,   
13.     "text":"text4"  
14. },{   
15.     "id":5,   
16.     "text":"text5"  
17. }]  

屬性

下拉列表框屬性擴充套件自combo(自定義下拉框)，下拉列表框新增的屬性如下：

$('#cc').combobox({
	groupFormatter: function(group){
		return '<span style="color:red">' + group + '</span>';
	}
});

<input class="easyui-combobox" data-options="
		valueField: 'label',
		textField: 'value',
		data: [{
			label: 'java',
			value: 'Java'
		},{
			label: 'perl',
			value: 'Perl'
		},{
			label: 'ruby',
			value: 'Ruby'
		}]" />

$('#cc').combobox({
	filter: function(q, row){
		var opts = $(this).combobox('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});

$('#cc').combobox({
	formatter: function(row){
		var opts = $(this).combobox('options');
		return row[opts.textField];
	}
});

事件

下拉列表框事件繼承自combo(自定義下拉框)，下拉列表框新增的事件如下：

// 在載入伺服器資料之前改變http請求引數的值
$('#cc').combobox({
	onBeforeLoad: function(param){
		param.id = 2;
		param.language = 'js';
	}
});

方法

下拉列表框擴充套件自combo(自定義下拉框)，下拉列表框新增或重寫的方法如下：

$('#cc').combobox('reload');      // 使用舊的URL重新載入列表資料
$('#cc').combobox('reload','get_data.php');  // 使用新的URL重新載入列表資料

$('#cc').combobox('setValues', ['001','002']);

$('#cc').combobox('setValue', '001');