⽀持搜索、⾃定义输⼊的下拉框组件--combobox组件使⽤⽂档easyui插件–combobox组合框
官⽅下载
使⽤说明
1、引⼊依赖的css和js⽂件
<link rel="stylesheet" href="<c:url value="/public/lib/easyui/easyui.css" />" type="text/css">
<link rel="stylesheet" href="<c:url value="/public/lib/easyui/icon.css" />" type="text/css">
<script src="<c:url value="/public/lib/jquery/jquery-1.12.1.min.js"/>"></script>
<script src="<c:url value="/public/lib/easyui/jquery.easyui.min.js" />" type="text/javascript"></script>
2、初始化元素
（1） 使⽤带有预定义的元素创建组合框（不推荐）
<select id="cc"class="easyui-combobox"name="dept" >
<option value="aitem1">aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>
<!--或者使⽤带有预定义的input进⾏创建-->
<input  id="cc"class="easyui-combobox"name="dept"
data-options="valueField:'id',textField:'text',url:'get_data.php'">
（2）使⽤原⽣html，通过js进⾏创建
<select id="cc">
<option value="1">1</option >
<option value="2">2</option >
<option value="3">3</option >
</select>
<!-- 或者使⽤input读取json⽂件 -->
<input  id="cc"name="dept"value="aa">
//select初始化
$('#cc')bobox({});
//input json动态获取数据初始化
$('#cc')bobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
说明：使⽤json格式的数据注意对数据的配置，如以上的初始化数据⽰例：
[{"id":1,"text":"text1"},
{"id":2,"text":"text2"}]jquery官方文档下载
常⽤属性–combobox扩展属性
名称类型描述默认值★valueField String绑定远程数据的key值value
★valueText String绑定远程数据时的value值text 名称类型描述默认值
★ url String从远程加载数据时的url地址null ★method String从远程获取数据时的加载⽅式post ★data Array⽤于加载的数据列表none mode String数据加载的模式，分为local本地加载和remote远程加载local loader json Load定义如何从远程服务器加载数据null 常⽤属性 – 继承⾃combo插件
名称类型描述默认值★ width number组件的宽度auto
★height number组件的⾼度22★panelWidth number下拉⾯板的宽度null ★panelHeight number下拉⾯板的⾼度200★multiple boolean是否⽀持多选false separator String多选时⽂本的分隔符，
★editable boolean是否⽀持输⼊true ★disabled boolean是否禁⽤⽂本域false ★readonly Boolean是否使⽂本域只读false ★hasDownArrow Boolean是否显⽰向下的箭头true ★value String组件的默认值null
delay number从最后⼀个键的输⼊事件起所产⽣的延时效应200事件 — combobox扩展事件
名称参数描述
onBeforeLoad param在请求发⽣之前触发，return false 则取消该动作
onLoadSuccess none远程加载数据成功后触发
onLoadError none远程加载数据失败后触发
★onSelect recordd（列表项）当选择⼀个列表项时触发
★onUnselect recordd（列表项）当取消⼀个列表项时触发
事件 — 继承⾃combo组件
名称参数描述★onShowPanel none当下拉⾯板显⽰时触发
★onHidePanel none当下拉⾯板隐藏时触发
★★★onChange（newValue, oldValue）当值发⽣改变时触发
⽅法 — combobox扩展
名称参数描述
getData none返回加载的数据
名称参数描述
loadData data加载本地列表数据
reload url请求数据的url，会重置上⼀次的url
setValues values多选赋值★★★setValue value单选赋值
★★★clear null清除组合框的值select value选择指定的选项
unSelect value取消指定的选项
⽅法 — 继承⾃combo组件
名称参数描述
textbox none返回⽂本框的对象
destory none销毁组件
resize width调整组件的宽度showPanel none显⽰下拉⾯板
hidePanel none隐藏下拉⾯板
disable none禁⽤组件
enable none启⽤组件
clear none清除组件的值
reset none重置组件的值★★★getValues none获取组件的值的数组
★★★getValue none获取组件的值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。