蓝桥软件学院简单下拉框

1、简单下拉框课程目标?了解Combo的基本属性、方法和事件?灵活掌握Combobox的基本操作ComboCombo简介自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。这是构建其他复杂的组合部件（如：combobox,combotree,combogrid等）之前需要构建的最基本的组件。Combo扩展自ValidateBox。Combo并不是学习的重点，只是为后续的ComboBoxComboTree及ComboGrid打基础。大家简单了解即可。效果如下图：开发Combo程序复制5.inputtyperadionamelang6.inputtyperadionamelang7.input

2、typeradionamelang8.inputtyperadionamelang9.inputtyperadionamelang10.11.12.scripttypetext/javascript13.function5.inputtyperadionamelang6.inputtyperadionamelang7.inputtyperadionamelang8.inputtyperadionamelang9.inputtyperadionamelang10.11.12.scripttypetext/javascript13.functionvalue01value02value03valu

3、e04value05TOCo1-5hz/*当点击刷新按钮刷新页面时combo控件中的值被清除，但是单选按钮依然是选中状态，所以需要清除checked属性*/#spinputchecked#cctruefalse#sp”#cc”panel#spinputfunctionvarthisvarthisspan#ccsetValuesetTexthidePanel参考代码：效果如上图。自定义下拉框使用Javascript创建一个select或input元素。注意：使用自定义下拉框不能通过标签的方式进行创建。Combo常用属性属性名属性值类型描述默认值widthnumber组件的宽度。autoheigh

4、tnumber组件的高度。22panelWidthnumber下拉面板宽度。nullpanelHeightnumber下拉面板高度。200panelMinWidthnumber下拉面板最小宽度。nullpanelMaxWidthnumber下拉面板最大宽度。nullpanelMinHeightnumber下拉面板最小咼度。nullpanelMaxHeightnumber下拉面板最大高度。nullpanelAlignstring面板对齐方式。可用值有：left,right。200multipleboolean定义是否支持多选。falseselectOnNavigationboolean定义是否允

5、许使用键盘导航来选择项目。trueseparatorstring在多选的时候使用何种分隔符进行分割。editableboolean定义用户是否可以直接输入文本到字段中。truedisabledboolean设置启用/禁用字段。falsereadonlyboolean设置该字段为读写/只读模式。falsehasDownArrowboolean定义是否显示向下箭头按钮。truevalue字段的默认值。delaynumber最后一次输入事件与执行搜索之间的延迟间隔（执行自动完成功能的延迟间隔）200keyHandlerobject在用户按下键的时候调用一个函数。案例一：代码如下:复制1.#cc2.r

6、ight3.1004.3005.true6.true7.false8.false参考代码：效果如下图：Combo常用方法方法名方法参数描述optionsnone返回属性对象。panelnone返回下拉面板对象。textboxnone返回文本框对象。destroynone销毁该组件。resizewidth调整组件宽度。showPanelnone显示下拉面板。hidePanelnone隐藏下拉面板。disablenone禁用组件。enablenone启用组件。readonlymode启用/禁用只读模式。validatenone验证输入的值。isValidnone返回验证结果。clearnone清除

7、控件的值。resetnone重置控件的值。getTextnone获取输入的文本。setTexttext设置输入的文本。getValuesnone获取组件值的数组。setValuesvalues设置组件值的数组。getValuenone获取组件的值。setValuenone设置组件的值。Combo常用事件事件名事件参数描述onShowPanelnone当下拉面板显示的时候触发。onHidePanelnone当下拉面板隐藏的时候触发。onChangenewValue,oldValue当字段值改变的时候触发。ComboboxCombobox简介下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择

8、一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。效果如下图：开发Combobox程序复制1.vselectclass2.optionvalue13.optionvalue14.optionvalue15.optionvalue16.optionvalue7.easyui-comboboxALAKAZARCAnamestatestyle200px参考代码：效果如上图。Combobox常用属性属性名属性值类型描述默认值valueFieldstring基础数据值名称绑定到该下拉列表框。valuetextFieldstring基础数据字段名称绑定到该下拉列表框。textg

9、roupFieldstring指定分组的字段名称。nullgroupFormatterfunction(group)返回格式化后的分组标题文本，以显示分组项。modestring定义了当文本改变时如何读取列表数据。localurlstring通过URL加载远程列表数据。nullmethodstringHTTP方法检索数据（POST/GETpostdataarray数据列表加载。nullfilterfunction疋义当mode设置为local时如何过滤本地数据，函数有2个参数：q：用户输入的文本。row：列表行数据。返回true的时候允许行显示。formatterfunction定义如何渲染行

10、。该函数接受1个参数：row。loaderfunction(param,success,error)定义了如何从远程服务器加载数据。jsonloaderloadFilterfunction(data)返回过滤后的数据并显示。groupFieldstring指定分组的字段名称。right案例一：代码如下:复制#cc./dist/data/combobox_data.jsonidtexttruetrue/可以使用键盘上的上下键来选中项false/用户不可以直接输入文本到字段中。false/定义不显示向下箭头按钮。参考代码：效果如下图：Combobox常用方法方法名方法参数描述optionsnone

11、返回属性对象。getDatanone返回加载数据。loadDatadata读取本地列表数据。reloadurl请求远程列表数据。通过url参数重写原始URL值。setValuesvalues设置下拉列表框值数组。setValuevalue设置下拉列表框的值。clearnone清除下拉列表框的值。selectvalue选择指定项。unselectvalue取消选择指定项。Combobox常用事件事件名事件参数描述onBeforeLoadparam在请求加载数据之前触发，返回false取消该加载动作。实现级联下拉列表onLoadSuccessnone在加载远程数据成功的时候触发。onLoadErrornone在加载远程数据失败的时候触发。onSelectrecord在用户选择列表项的时候触发。onUnselectrecord在用户取消选择列表项的时候触发。HTML代码：复制JS代码：复制function#cc1./dist/data/oneLevelCategory.jsonidtexttrue/可以使用键盘上的上下键来选中项false/用户不可以直接输入文本到字段中。functionvar./dist/data/twoLevelCategory_.json#cc2reloadfunction$(this).combobox(getData)得到所有下拉项/得到第一个下