Bootstrap是流行的前端UI组件库之一。使用Bootstrap，您可以轻松构建美观统一的页面。将设计者从特定的用户界面编码中解放出来。

Bootstrap提供了许多前端UI组件。带下拉菜单的文本框就是其中之一，渲染如下(如果真的想完全设计，那就要费点功夫了)。

有关该组件的详细信息，请参见Bootstrap官方网站和带有下拉菜单的文本框。

看到上面的渲染让我想起了WinForm编程中的DropDownList控件。但是，与DropDownList控件相比，仍然缺少以下内容。

1.当您单击菜单中的某个项目时，菜单的文本将自动显示在文本框中。

2.点击菜单中的某个项目时，提供获取相关数据的功能(可以是菜单文本，也可以是相关文本)。

3.文本框无法编辑，只能通过单击菜单来更改内容。

4.可以设置下拉菜单的最大高度，以便当菜单项过多时可以出现滚动条。想想30个项目会占据整个屏幕是多么恐怖。

当然Bootstrap只提供前端UI的外观，以上都可以通过编码来完成。

基于代码农民和自力更生的精神，我自己编写了一个DropDownList的JQuery组件。

首先规划这个JQuery组件的属性：

InputName:文本框的名称和id属性，默认值为“q”；

文本：右边按钮的文本。默认值为“示例”。

ReadOnly:文本框的可编辑属性。默认值为真，即不能编辑，只能通过单击菜单来更改文本。

MaxHeight:下拉菜单的最高高度。默认值为-1，不设置最大高度，菜单的高度由菜单中的项目决定。

On:设置选择菜单项时要调用的函数。默认值为$。noop()，JQuery中的一个空函数；

项目：菜单项的集合。每个菜单项都提供项目文本属性(菜单文本)、项目数据属性(相关数据)和选定属性(有几个默认选项，这是最后一个)。

部分：菜单组的几何图形。每个组包含一个项目标题属性(组标题文本)和一个项目属性(组菜单项的集合)。每个群体之间都有一条分界线。该属性优先于Items属性(如果只设置了Items，则意味着只有一个菜单组，没有分隔线，也没有组标题文本)。

DropDownList的组件代码如下。因为它基于JQuery，所以应该放在JQuery参考代码下面：

代码比较简单，主要是根据属性值拼接HTML代码。以下是简要说明：

ReadOnly的实现：因为不是通过设置文本框的ReadOnly属性(这会改变文本框的外观)，所以通过绑定来屏蔽文本框的剪切、复制、粘贴和按键事件来实现。

MaxHeight的实现：判断下拉菜单(元素UL)的Height是否超过MaxHeight，如果是，设置CSS属性Height和Overflow。

OnSelect函数：要自己实现一个函数，参数有两个值，第一个值是文本框的名称，第二个值是当前点菜单项的相关数据(ItemData属性)。

脚本（函数($){ jQuery.fn.DropDownList=函数（选项){//设置插件的默认属性定义变量默认值={ InputName:'Q '，ButtonText: '示例，ReadOnly:true，MaxHeight:-1，onSelect: $ .noop()，} var options=$ .扩展（默认值、选项);返回这个。每个(function(){ var o=options；var Obj=$(this)；var S='div class='输入组"";S=S’输入类型=' text ' class=' form-control ' name=' o . input name ' ' id=' o . input name ' '/'；S=S ' div class=' input-group-BTN " "；S=S '按钮类型=' button ' class=' BTN BTN-默认下拉-切换'数据-切换='下拉' o .按钮文本' span class='脱字符号/span/button '；S=S 'ul class='下拉菜单下拉菜单右'角色='菜单；//可以由部分参数或项目参数设置下拉条目，部分的优先级比项目高如果(o .节！==未定义){ $。每个(o .节、函数(n、值){ //从第2节开始，在每节的顶部添加一条分割线if(n0){ S=S ' Li class=' divider '/Li '；} //如果设置了ItemHeader参数，则给该节添加标题文本如果(值ItemHeader！==未定义){ S=S 'li类='下拉标题'值项目标题'/Li '；} CreateItem(值);});} else { CreateItem(o)；} var SelText=var SelData=函数创建项目{ $ .每个（项目。项目，功能(n，Item){ //如果数据参数没有定义，则把以要素项的值画出文字参数传给项目日期如果（项目ItemData===未定义){项目.项目数据=项目项目数据='项目.项目数据'' '项目项目文本'/a/Li '；//如果设置了挑选参数，则获取该条目的项目数据和项目文本。//如果有多个条目设置该参数，则获取的是满足条件最后一个条目如果（项目。选定==真){选择文本=项目项目文本.选择数据=项目item data } })；} S=S '/ul/div/div '；物体。html(S)；var Input=Obj。查找('输入')；//如果有条目设置挑选参数，则调用设置活动条目的函数if (SelText！='') { SetData(SelText，sel data)；} //给所有的条目绑定单击事件，单击后调用设置活动条目的函数查找(' a ').绑定(“点击”)，函数{ SetData($(this)} .html()，$(this).attr(' Item DATa ')；});//如果只读的参数设置为没错，则屏蔽掉文本框的相关事件，使得文本框不能编辑。(而又显示为激活状态)if(o . ReadOnly==true){ Input。绑定(“”剪切复制粘贴键向下，函数(e){ e . PreventDefault()；});} //设置最大高度参数后（大于0),则设置下拉菜单的最大高度，若条目过多，会出现垂直滚动条if(o . MaxHeight0){ var UL=Obj。find(' ul ')；if(ul。height()o . MaxHeight){ ul。CSS({ ' height ' : o .MaxHeight，' overflow ' : ' auto ' })；} }函数设置数据(文本、数据){输入。val(文本)；如果(选择时)选择时(输入名称、数据)；} } });} })(jQuery)；/script下面是几个用法实例：对身份为控件的差异元素运用组件，则在该差异内部添加一个控件组件

1、用项目属性实现下拉菜单（所有菜单项都在一个组里，没有组标题，没有分割线)

函数显示数据(输入名称，数据){警报(输入名称' : '数据)；}$('#DropDownList ').DropDownList({ InputName:'Q '，ButtonName: '参考，onSelect :函数(一，数据){显示数据(一，数据)；}，Items:[ {ItemText: '示例1 '，项目数据： '演示1 '，选择了：真实，{ItemText: '示例2 '，ItemData:'Demo2'}，{ItemText: '示例3 '，item data : ' demo 3 ' }]})；效果图：

2、用部分属性实现下拉菜单（菜单组之间有分割线，菜单组可以设置组标题)

功能显示数据（输入名称，数据)警报（输入名称':'日期);$(#DropDownList).下拉列表([输入名：'Q '，按钮文本：',选择：功能(我，数据) [ 显示数据(我，数据);[, 第： 节] [项目头：' 项目： [项目文本：',项目数据： '全部']，[项目：] [项目：'1',项目数据： '演示1 '，选择：街[]项目：']]

3•德莱奥德

功能显示数据（输入名称，数据)警报（输入名称':'日期);$(#DropDownList).DropDownList({ InputName:'Q '，ButtonText: '参考，MaxHeight:310，onSelect :函数(I，Data) { ShowData(I，Data)；}，Sections:[ { ItemHeader: '直辖市，Items:[ {ItemText: '北京，ItemData:'Beijing'}，ItemText: '上海，ItemData: '上海'，选择了：路径，{ItemText: '天津，ItemData: '天津' }，ItemText: '重庆，ItemData: '重庆' } ] }，{ ItemHeader: '华东地区，Items:[ {ItemText: '山东，ItemData: '山东' }，ItemText: '江苏，ItemData: '江苏' }，{ItemText: '安徽，ItemData: '安徽' }，ItemText: '浙江，ItemData: '浙江' }，{ItemText: '福建，ItemData: '福建' } ] }，{ ItemHeader: '华南地区，Items:[ {ItemText: '广东，ItemData: '广东' }，ItemText: '广西，ItemData: '广西' }，ItemText: '海南，ItemData: '海南' } ] }，{ ItemHeader: '华中地区，Items:[ {ItemText: '湖北，ItemData: '湖北' }，{ItemText: '湖南，ItemData: '湖南' }，ItemText: '河南，ItemData: '河南' }，ItemText: '江西，ItemData: '江西' } ] }，{ ItemHeader: '华北地区，Items:[ {ItemText: '河北，ItemData: '河北' }，{ItemText: '山西，ItemData: '山西' }，ItemText: '内蒙古，ItemData: '内蒙古' } ] }，{ ItemHeader: '西北地区，Items:[ {ItemText: '宁夏，ItemData: '宁夏' }，ItemText: '新疆，ItemData: '新疆' }，{ItemText: '青海，ItemData: '青海' }，{ItemText: '陕西，ItemData: '陕西' }，ItemText: '甘肃，ItemData: '甘肃' }，] }，{ ItemHeader: '西南地区，Items:[ {ItemText: '四川，ItemData: '四川' }，ItemText: '云南，ItemData: '云南' }，ItemText: '贵州，ItemData: '贵州' }，{ItemText: '西藏，ItemData: '西藏' } ] }，{ ItemHeader: '东北地区，Items:[ {ItemText: '辽宁，ItemData: '辽宁' }，{ItemText: '吉林，ItemData: '吉林' }，ItemText: '黑龙江，ItemData: '黑龙江' }]}]})；效果图：