div模拟select/option解决兼容性问题及增加可拓展性

个人博客：

http://mcchen.club

---

想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式，比如line-height等，还会由此导致在IE8及以下版本浏览器中的各种问题。

这个模拟思路很简单，也很清晰，我就直接上代码了

html：

第一层div是模拟select标签，第二层div是模拟option下拉列表

 <div>
     <div class="sim-select"></div>
 </div>
 <div class="sim-downList">

 </div>

css：

这个按需求可自己随意扩展随意调

 .sim-select { height: 30px; line-height: 30px; border: solid 2px #f0f0f0;}
 .sim-downList {line-height: 30px; border: solid 1px #d9d9d9; display: none; }
 .sim-option {
   &:hover { background-color: red; cursor: pointer;}
 }

js：

Ps:记得引用jq库

我是自己模拟的types数据，可以添加form，拓展为获取后台数据等。

 var types = [{name:"选择11111"},{name:"选择222222"},{name:"选择333333"},{name:"选择4444444"},{name:"选择55555"}];
         var $select = $(".sim-select"),$downList = $(".sim-downList"), i,$length = types.length;
         for(i=0;i<$length;i++) {
             $downList.append("<div class='sim-option'>" + types[i].name + "</div>")
         }
         $select.text(types[0].name);
         $select.click(function () {

             if($downList.is(":visible")){
                 $downList.hide();
             }
             else {
                 $downList.show();
             }
         });
         $(".sim-option").click(function () {
             var _this = this;
             var text = _this.textContent;
             $select.text(text);
         })

具体效果：

以上纯属本人的拙见，恳请指出不足之处，共勉。^_^