# 加载方式 ## JS调用加载 > 自定义下拉框不能通过标签的方式进行创建。 ``` <input id="box" /> <script> $(function () { //JS 加载调用 $('#box').combo({ required : true, multiple : true, }); }); </script> ``` # 属性列表 | 属性名 | 值 | 说明 | | --- | --- | | width | number| 组件的宽度。默认值 auto。| | height | number | 组件的高度。默认值22。| | panelWidth | number| 下拉面板宽度。默认值 null。| | panelHeight | number | 下拉面板高度。默认值200。| | multiple | boolean | 定义是否支持多选。默认值 false。| | selectOnNavigation | boolean| 定义是否允许使用键盘导航来选择项目。默认值 true。| | separator | string | 在多选的时候使用何种分隔符进行分割。默认值’,’。| | editable | boolean | 定义用户是否可以直接输入文本到字段中。默认值 true。| | disabled | boolean | 设置启用/禁用字段。默认值 false。| | readonly | boolean | 设置该字段为读写/只读模式。默认值false。| | hasDownArrow | boolean | 定义是否显示向下箭头按钮。默认值true。| | value| string | 字段的默认值。| | delay | number | 最后一次输入事件与执行搜索之间的延迟间隔（执行自动完成功能的延迟间隔）默认值200。| | keyHandler | object | 在用户按下键的时候调用一个函数。| *** ``` <script> $('#box').combo({ width : 300, height : 50, panelWidth : 300, panelHeight : 200, disabled : false, hasDownArrow : false, delay : 50, editable : true, readonly : false, required : true, multiple : true, }); </script> ``` # 事件列表 | 事件名 | 事件属性 | 说明 | | --- | --- | | onShowPanel | none | 当下拉面板显示的时候触发。 | | onHidePanel | none | 当下拉面板隐藏的时候触发。 | | onChange | newValue, oldValue | 当字段值改变的时候触发。| *** ``` <script> $('#box').combo({ required : true, multiple : true, onShowPanel : function () { alert('下拉的时候触发！'); }, onHidePanel : function () { alert('下拉面板隐藏的时候触发！'); }, onChange : function () { alert('字段值改变的时候触发！'); }, }); </script> ``` # 方法列表 | 方法名 | 传参 | 说明 | | --- | --- | | options | none | 返回属性对象。| | panel | none | 返回下拉面板对象。| | textbox | none | 返回文本框对象。| | destroy | none | 销毁该组件。| | resize | width | 调整组件宽度。| | showPanel | none | 显示下拉面板。| | hidePanel | none | 隐藏下拉面板。| | disable | none| 禁用组件。| | enable | none| 启用组件。| | readonly | mode | 启用/禁用只读模式。| | validate | none | 验证输入的值。| | isValid | none | 返回验证结果。| | clear | none | 清除控件的值。| | reset vnone | 重置控件的值。| | getText | none 获取输入的文本。| | setText | text | 设置输入的文本。| | getValues | none | 获取组件值的数组。| | setValues | values | 设置组件值的数组。| | getValue | none | 获取组件的值。| | setValue | value | 设置组件的值。| *** ``` //返回属性对象 console.log($('#box').combo('options')); //返回下拉面板对象 console.log($('#box').combo('panel')); //返回文本框对象 console.log($('#box').combo('textbox')); //销毁组件 $('#box').combo('destroy'); //禁用和启用 $('#box').combo('disable'); $('#box').combo('enable'); //调整到默认宽度 $(document).click(function () { $('#box').combo('resize', 'width'); }); //显示下拉面板 $(document).click(function () { $('#box').combo('showPanel'); }); //隐藏下拉面板 $('#box').combo('hidePanel'); //启用禁用，true 可不填，false 则为不启用 $('#box').combo('readonly',true); //验证文本框内的值是否合法 $(document).click(function () { console.log($('#box').combo('isValid')); }); //清空文本框内容 $(document).dblclick(function () { $('#box').combo('clear'); }); //重置文本框到初始状态 $(document).dblclick(function () { $('#box').combo('reset'); }); //得到文本框字符串 $(document).click(function () { console.log($('#box').combo('getText')); }); //设置文本框字符串 $(document).click(function () { console.log($('#box').combo('getText')); }); //获取组件的 Value 值 $(document).click(function () { console.log($('#box').combo('getValue')); console.log($('#box').combo('getValues')); }); //可以使用$.fn.combo.defaults 重写默认值对象。 ```