EasyUI

绑定数据

html代码:

<select class="easyui-combobox" id="cc1" style="width:150px"></select>

js代码，绑定数据源:

//绑定数据
$('#cc1').combobox({
	url:url,
	valueField:'id',
	textField:'text'
});

//绑定数据后(默认选中第一个值)
$('#cc1').combobox({
	url:url,
	valueField:'id',
	textField:'text',
	onLoadSuccess:function(data){
		$(this).combobox("select", data[0].id);
	}
});

级联绑定

html代码:

<select id="cc" style="width:150px"></select>
级联：<select class="easyui-combobox" id="cc_child" style="width:150px"></select>

JS代码:

//绑定数据
$('#cc').combobox({
	url:url,
	valueField:'id',
	textField:'text',
	onSelect:function (data){
		//级联绑定
		url = "/combox/datachild/"+data.id;
		$('#cc_child').combobox({
			url:url,
			valueField:'id',
			textField:'text',
			onLoadSuccess:function(data){
				$(this).combobox("select", data[0].id);
			},onSelect:function (data) {
				//绑定选择事件
				alert("您已选择：" + data.id);
			}
		});
	}
});

多选常用操作

html代码:

<select multiple="multiple" class="easyui-combobox" id="cc2" style="width:150px"></select>

js代码，获取选中值:

//（多选）获取选中值
function getMultipleValue() {
	var values = $("#cc2").combobox("getValues");
	alert("已选:"+values);
}

//（多选）全选
function checkAllValue() {
	var data = $('#cc2').combobox('getData');
	var values = "";
	for(i=0;i<data.length;i++){
		if(i>0) {
			values+=",";
		}
		values += data[i].id;
	}
	var valuesArray = values.split(",");
	$('#cc2').combobox('setValues', valuesArray);
}

//（多选）清空
function clearMultipleValue() {
	$("#cc2").combobox("setValues","");
}

绑定后格式化Text

html代码：

<select class="easyui-combobox" id="cc3" style="width:150px"></select>

JS代码：

//格式化绑定
$('#cc3').combobox({
	url:url,
	valueField:'id',
	textField:'text',
	formatter:function(row){
		var imageFile = '/img/fav.gif';
		return '<img class="item-img" src="'+imageFile+'"/><span class="item-text"> '+row.text+'</span>';
	}
});

数据源格式(JSON数组)

[{"id":"黑足猫1","text":"黑足猫1"},{"id":"黑足猫2","text":"黑足猫2"},{"id":"黑足猫3","text":"黑足猫3"},{"id":"黑足猫4","text":"黑足猫4"},{"id":"黑足猫5","text":"黑足猫5"},{"id":"黑足猫6","text":"黑足猫6"},{"id":"黑足猫7","text":"黑足猫7"},{"id":"黑足猫8","text":"黑足猫8"},{"id":"黑足猫9","text":"黑足猫9"},{"id":"黑足猫10","text":"黑足猫10"}]

效果截图

作者： Zealon
崇尚简单，一切简单自然的事物都是美好的。