一、制作静态效果先用css和html，做出一个应该有的样子。这里这两个我使用的是字体，可以在icomoon网站上面自己制作。用字体的好处是和输入框定位很方便，而且还可以控制大小颜色等，唯一的不足是ie6和ie7由于不支持:before选择器，导致无法显示这种字体，但可以通过一些其他方法实现，大家可以自己尝试下。下面是html代码
选项一 选项二 选项三 选项四
1、标签中有style和class，这个style就是必须属性，一定要有
2、最外围是用span来做包裹的，然后给了个inline-block属性，之所以用行内元素是为了以后布局的方便，换成块元素也是可以的，但很多时候块元素会伴随着float浮动等样式，控制起来比较麻烦
3、ficomoon icon-angle-bottom在定义字体
4、span的属性position是relative，下拉我就打算用ul定位来模拟，ul的position是absolute，top以后可以根据jquery来获取span的高度设置，left就写死了
5、li里面的内容我加了个a标签，这里就是想偷懒一下，a标签有个:hover伪类，移上去可以改变css，这样我就能少写这个移到内容上去变样式的特效
下面是css代码：
@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-fl11l'); src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'), url('fonts/icomoon.woff?-fl11l') format('woff'), url('fonts/icomoon.ttf?-fl11l') format('truetype'), url('fonts/icomoon.svg?-fl11l#icomoon') format('svg'); font-weight: normal; font-style: normal;}.ficomoon{font-family:'icomoon';}.icon-angle-top:before {content: \f102}.icon-angle-bottom:before {content: \f103}/*下面的可根据自己的实际情况做修改*/.combox_border{border:1px solid #c2c2c2;height:28px;width:245px}.combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;}.combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2}.combox_select{border:1px solid #c2c2c2;border-top:0;width:100%}.combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;}.combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;}.combox_select a:hover {text-decoration: none;background:#f5f5f5}
这里的combox_border等样式可以自定义，可以加css3样式美化，我这里就做了个朴素的样式。
二、制作js特效
在做js的时候，碰到个奇怪的问题，就是放在任何浏览器中都不会报错，但是在ie6死活提示未设置的对象属性的错误，最后发现是因为js文件编码的问题，不是utf-8，改变下编码就可以了。
先是一个jquery插件格式
(function($){ $.fn.combox = function(options) { };})(jquery);
然后是添加默认参数
var defaults = { bordercss: combox_border, inputcss: combox_input, buttoncss: combox_button, selectcss: combox_select, datas:[]};var options = $.extend(defaults, options);
bordercss 最外面包裹的样式，就是上面的span
inputcss 输入框的样式
buttoncss 按钮的样式，就是
selectcss 下拉列表的样式
datas 下拉列表中的内容
然后是一个渲染的方法
this.each(function() {var _this = $(this);_this = _initborder(_this);//初始化外框css ie6中需要有返回值_this = _initinput(_this);//初始化输入框_initselect(_this);//初始化下拉列表});
动态的生成输入框，按钮，下拉框，附上样式和时间。我将三个渲染分别放在了三个函数中，这样清晰一点
function _initborder($border) {//初始化外框css $border.css({'display':'inline-block', 'position':'relative'}).addclass(options.bordercss); return $border; } function _initinput($border){//初始化输入框 $border.append(''); $border.append(''); //绑定下拉特效 $border.delegate('font', 'click', function() { var $ul = $border.children('ul'); if($ul.css('display') == 'none') { $ul.slidedown('fast'); $(this).removeclass('icon-angle-bottom').addclass('icon-angle-top'); }else { $ul.slideup('fast'); $(this).removeclass('icon-angle-top').addclass('icon-angle-bottom'); } }); return $border;//ie6需要返回值 } function _initselect($border) {//初始化下拉列表 $border.append(''); var $ul = $border.children('ul'); $ul.css('top',$border.height()+1); var length = options.datas.length; for(var i=0; i
下面是调用插件：
一句话就可以了，挺方便的。
demo演示：http://demo.jb51.net/js/2014/combox_jquery/
demo下载：http://www.jb51.net/jiaoben/199034.html