原理就是一个文本框加一个保险商实验所模拟下拉框，用字体模拟一个下拉按钮。

一、制作静态效果

我使用的是字体，可以在icomoon网站上面自己制作。用字体的好处是和输入框定位很方便，而且还可以控制大小颜色等，唯一的不足是IE6和IE7由于不支持：以前选择器，导致无法显示这种字体，但可以通过一些其他方法实现，大家可以自己尝试下。下面是超文本标记语言代码

span style=' display : in-block；位置： relative ' class=' combox _ border ' input type=' text ' class=' combox _ input '/font class=' ficomoon icon-angle-bottom combox _ button ' style=' display : inline-block '/font ul style='位置： absolutetop :29 pxleft :-1px ' class=' combox _ select ' lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '选项一/a/Li lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' 外部nofollow '选项二/a/Li lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '选项三/a/Li lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '选项四/a/li /ul/span1、标签中有风格和同学们，这个风格就是必须属性，一定要有2、最外围是用跨度来做包裹的，然后给了个内嵌块属性，之所以用行内元素是为了以后布局的方便，换成块元素也是可以的，但很多时候块元素会伴随着漂浮物浮动等样式，控制起来比较麻烦3、虚拟图标-角度-底部在定义字体4、跨度的属性位置是相对的，下拉我就打算用保险商实验所定位来模拟，ul的位置是绝对，顶部以后可以根据jquery来获取跨度的高度设置，左侧就写死了5、李里面的内容我加了个a标签，这里就是想偷懒一下，a标签有个：悬停伪类，移上去可以改变CSS，这样我就能少写这个移到内容上去变样式的特效下面是半铸钢钢性铸铁(铸造半钢)代码：

@ font-face { font-family : ' icomoon '；src:url('fonts/icomoon.eot？-fl11l’)；src:url('fonts/icomoon.eot？#iefix-fl11l ')格式(' embedded-opentype ')、url('fonts/icomoon.woff？-fl11l’)格式(' woff ')，url('fonts/icomoon.ttf？-fl11l’)格式(' truetype ')，url('fonts/icomoon.svg？-fl11l # icomoon ')格式(“SVG”)；字体粗细：正常；字体样式：正常；}.ficomoon { font-family : ' icomoon '；}.{content: 'f102'}之前的图标-角度-top :{content: 'f103'}之前的图标-角度-底部：/*下面的可根据自己的实际情况做修改*/.combox _ border { border :1 px solid # C2C 2；高度：28 px宽度：245px} .combox _ input { border:0线高：25 px高度：25px左衬垫左： 5px宽度：85%;垂直对齐： 中间；}.combox _ button { width :12%；文本对齐：居中；垂直对齐： 中间；光标：指针指针；边框-左侧：1px实心# c2c2c2 } .combox _ select { border :1 px solid # C2C2C2；边框-top :0；宽度：100%}。combox _ select Li {溢出：隐藏；高度：30 px线高：30 px光标：指针指针；}.combox _ select a { display:块；线高： 28pxpadding: 0 8px文本装饰：无；color: # 666}。combox _ select a :悬停{ text-decoration : none背景：#f5f5f5}这里的组合框_边框等样式可以自定义，可以加CSS3样式美化，我这里就做了个朴素的样式。

二、制作射流研究…特效

在做射流研究…的时候，碰到个奇怪的问题，就是放在任何浏览器中都不会报错，但是在IE6死活提示未设置的对象属性的错误，最后发现是因为射流研究…文件编码的问题，不是UTF-8，改变下编码就可以了。

先是一个jquery插件格式

(函数($){ $。fn。combox=function(options){ }；})(jQuery)；然后是添加默认参数

定义变量默认值={ borderCss: 'combox_border '，inputCss: 'combox_input '，buttonCss: 'combox_button '，selectCss: 'combox_select '，data :[]}；定义变量选项=$。扩展（默认值、选项);borderCss最外面包裹的样式，就是上面的跨度输入输入框的样式按钮钢性铸铁按钮的样式，就是

选择钢性铸铁下拉列表的样式数据下拉列表中的内容然后是一个渲染的方法

这个。每个(function(){ var _ this=$(this)；_ this=_ init border(_ this)；//初始化外框CSS IE6中需要有返回值_ this=_ initInput(_ this)；//初始化输入框_ init select(_ this)；//初始化下拉列表});动态的生成输入框，按钮，下拉框，附上样式和时间。我将三个渲染分别放在了三个函数中，这样清晰一点

function _ init border($ border){//初始化外框CSS $边框。CSS({ ' display ' : ' inline-block '，' position':'relative'})。添加CLaSS(选项。border cs)；返回$ border } function _ initInput($ border){//初始化输入框$边框。追加(' input type=' text ' class=' options。输入cs ' '/')；$边框。追加(' font class=' ficomoon icon-angle-bottom '选项。buttoncss ' ' style=' display : inline-block '/font ')；//绑定下拉特效$border.delegate('font '，' click '，function(){ var $ ul=$ border。儿童(' ul ')；if($ ul。CSS(' display ')==' none '){ $ ul。向下滑动(“快速”)；$(这个)。removeClass(“”图标-角度-底部')。addClass(')图标-角度-顶部');} else { $ ul。向上滑动('快速')；$(这个)。removeClass(“”图标-角度-顶部')。addClass(')图标-角度-底部');} });返回$ border//IE6需要返回值} function _ init select($ border){//初始化下拉列表$边框。追加(' ul style='位置：绝对值；左侧：-1px；显示：无' class='选项。selectcss‘‘’)；var $ ul=$ border。儿童(' ul ')；$ul.css('top '，$ border。高度()1)；可变长度=选项。数据。长度；for(var I=0；ileng tti)$ ul。追加(' lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '选项。数据[I]'/a/Li ')；$ul.delegate('li '，' click '，function(){ $ border。儿童(' :文本').瓦尔($(这个).text())；$ ul。hide()；$border.children(字体).removeClass(“”图标-角度-顶部')。addClass(')图标-角度-底部');//确定的时候要将下拉的图标改变});返回$ border}三个函数中的参数我都加了个$符号，便于自己知道这是一个jquery对象。这几个函数中没什么技术难点，都是非常普通自然的逻辑，大家也可以随时根据自己的不同需求改变代码，插件总共只有50几行，非常容易修改。

下面是调用插件：

脚本类型='text/javascript'$(文档)。ready(function() { $('#combox ')).combox({ data :['选项一','选项二','选项三']});})/脚本/head dyspan id=' combox '/span/body/html一句话就可以了，挺方便的。

演示演示：http://演示。JB 51。net/js/2014/combox _ jquery/

演示下载：//www .JB 51。net/jiao Ben/199034。超文本标记语言