【蓝桥软件学院】简单下拉框.docxVIP

简单下拉框课程目标了解Combo的基本属性、方法和事件灵活掌握Combobox的基本操作ComboCombo简介自定义下拉框显示一个可编辑的文本框和下拉面板在html页面。这是构建其他复杂的组合部件（如：combobox,combotree,combogrid等）之前需要构建的最基本的组件。Combo扩展自ValidateBox。Combo并不是学习的重点，只是为后续的ComboBox、ComboTree及ComboGrid打基础。大家简单了解即可。效果如下图：开发Combo程序复制inputid=ccstyle=width:150px/inputdivid=spdivstyle=color:#99BBE8;background:#fafafa;padding:5px;Select a language/divdivstyle=padding:10pxinputtype=radioname=langvalue=01spanJava/spanbr/inputtype=radioname=langvalue=02spanC#/spanbr/inputtype=radioname=langvalue=03spanRuby/spanbr/inputtype=radioname=langvalue=04spanBasic/spanbr/inputtype=radioname=langvalue=05spanFortran/span/div/divscripttype=text/javascript$(function(){/** * 当点击刷新按钮刷新页面时combo控件中的值被清除，但是单选按钮依然是选中状态，所以需要清除checked属性 */$(#sp input).removeProp(checked);$(#cc).combo({required:true,editable:false});$(#sp).appendTo($(#cc).combo(panel));$(#sp input).click(function(){var v = $(this).val();var s = $(this).next(span).text();$(#cc).combo(setValue, v).combo(setText, s).combo(hidePanel);});});/script参考代码:23/combo01.html效果如上图。自定义下拉框使用Javascript创建一个select或input元素。注意：使用自定义下拉框不能通过标签的方式进行创建。Combo常用属性属性名属性值类型描述默认值widthnumber组件的宽度。autoheightnumber组件的高度。22panelWidthnumber下拉面板宽度。nullpanelHeightnumber下拉面板高度。200panelMinWidthnumber下拉面板最小宽度。nullpanelMaxWidthnumber下拉面板最大宽度。nullpanelMinHeightnumber下拉面板最小高度。nullpanelMaxHeightnumber下拉面板最大高度。nullpanelAlignstring面板对齐方式。可用值有：left,right。200multipleboolean定义是否支持多选。falseselectOnNavigationboolean定义是否允许使用键盘导航来选择项目。trueseparatorstring在多选的时候使用何种分隔符进行分割。,editableboolean定义用户是否可以直接输入文本到字段中。truedisabledboolean设置启用/禁用字段。falsereadonlyboolean设置该字段为读写/只读模式。falsehasDownArrowboolean定义是否显示向下箭头按钮。truevaluestring字段的默认值。delaynumber最后一次输入事件与执行搜索之间的延迟间隔（执行自动完成功能的延迟间隔）200keyHandlerobject在用户按下键的时候调用一个函数。案例一：代码如下：复制$(#cc).combo({panelAlign:right,width:100,panelWidth:300,multiple:true,required:true,editable:false,hasDownArrow:false});参考代码:23/combo02.html效果如下图：Combo常用方法方法名方法参数描述optionsnone返回属性对象。panelnone返回下拉面板对象。textboxnone返回文本框对象。destroynone销毁该组件。resizewidth调整组件宽度。sho