easyUI combox

1  组合框（combobox） 显示一个可编辑的文本框和下拉列表，用户可以从下拉列表中选择一个或多个值.

可以直接输入文本到列表的顶部，或者从列表中选择一个或多个现成的值。

 创建的方式:

 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

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'**.json'">

3 使用js创建

<input id="cc">
$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

 

data-option参数

 

使用

<div id="warehouse-search">
		<div class="easyui-panel warehouse-search" data-options="border:false">
		
			<input class="easyui-combobox  warehouse-search-con" id="warehouse-name" style="width:280px;" data-options="
				method: 'post', 
				valueField:'id',
				icons:[{
				    iconCls:'icon-clean'
				}],
				mode:'local',
				onHidePanel:closePanel,
				filter:granaryFilter,
				onSelect:selectGranary,
				textField:'name',
				groupField:'group',
				formatter:formatItem,
				groupFormatter:formatGroup
			">
	    </div>
	</div>

关闭时触发的事件

	function closePanel() {
		var id = '', text = '';
		id = $("#warehouse-name").combobox('getValue');
		text = $("#warehouse-name").combobox('getText');
		if (clickFlag) {
			if (id && text && id == text) {
				$("#warehouse-name").combobox('setValue', id);
				for ( var s in Control.granaryList) {
					var granary = Control.granaryList[s];
					if (id == granary.id) {
						selectGranary(granary);
						break;
					}
				}
			}
		} else if (closeFlag) {
			$("#warehouse-name").combobox('showPanel');
		}
		clickFlag = true;
	}


//格式化显示
	function formatGroup(group) {
		var s = "";
		if (group == 'N') {
			s = '<span class="fl title">仓库</span>'
					+ '<span class="fr title">保管员</span>';
		} else {
			s = '<span class="fl title">我保管的仓库</span>';
		}
		return s;
	}

 

$("#warehouse-name").combobox('getValue');  //获取id

text = $("#warehouse-name").combobox('getText'); //获取内容