最近做的一个项目有下拉框 同事都是用的是美化控件，但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样？对以后的维护会不会造成有影响？比如我想增加一个功能或者减少一个功能会不会影响？还有就是假如 一个小小的功能要引入控件上千行代码 我自己写个简单的控件也能满足当时的需求 只需要百行代码 这样的话 加载JS的时候 性能就相对来说更好点，因为网上的控件并不会像淘宝的kissy控件一样经常有人维护，扩展性当然不赖 性能也考虑了很多，所以也借着这个机会研究了下 用JS模拟下拉框 当然kissy中的也研究了下，我这个只是考虑了原审的下拉框，没有像kissy中下拉框内部还考虑了有单选框或者复选框的情况！
模拟下拉框的原理：
遍历页面当中所有select下拉框 初始化时 隐藏起来 接着遍历下拉框 获取option内容 遍历 创建li列表 分别渲染数据到li上去 也就是说 select option分别用ul li代替 表现形式上 下拉框用背景图片 这样看起来像是下拉框 但是我们操作的实际上是无序列表。
先来看看效果图：
下面先看看页面上HTML代码 如下：
一：如上做的demo 假如页面上有2个select下拉框 只需要如上写代码就ok！记住 select 中的属性 name一定要加上 并且不同的select name一定不一样，因为我js取名class或者id是根据name分别渲染上去的。
二： 接着可以看看我用JS初始化的时候 页面上代码是个什么样的变化！如下图所示：
可以看到 select 中的name叫tips2 div ul li的class 后缀都带有tips2 所以我是根据select中的name来取名class 来区分是那个下拉框的。
三： 但是当下拉框内容很多的时候 我们应该要有个滚动条 所以在代码配置时候 有个配置属性"height" 来配置当前的高度 通过计算一个li的高度 X(乘以) li的长度 保存到一个临时变量里 然后这个临时变量高度和我设置的高度是否大于还是小于 如果设置的高度小于临时变量的高度的话 那么出现滚动条，如下效果：
但是这个滚动条只是默认的 有时候设计师设计一个很好看的滚动条时候 这个滚动条就不行了，这个先不急，下一篇博客我想研究下 "JS模拟滚动条"来实现这个效果。
下面先来看看配置项代码吧！编码风格还是和以前一样！
this.config = { container : '.J_Select', // 渲染容器 isShowSelectValue : true, // 选中某个选项后 是否显示该值 selectHoverCls : 'tag_select_hover', // 鼠标移上select去 类名 optionHoverCls : 'hover', // option移上去 类名 selectItemCls : 'open_selected', // option 选择一项时的类名 eventType : 'click', // 触发下拉框事件 默认为click height : 200, // 高度 超过设定高度有滚动条 不设置自适应 type:{number} isHideBoxBySelected : false, // 用户选中某一项后 是否关闭下拉框 getTextCallBack : null, // 获取选中下拉框的文本 {return obj} getSelectedOptionsIndex : null, // 获取当前下拉框选中的索引 {return obj} selectCallBack : null, // 选中完后的回调函数 render : null, // 下拉框内容渲染完后的回调 };