div模擬select/option解決兼容性問題及增長可拓展性

我的博客：

http://mcchen.club

---

 

想到作這個模擬的緣由是以前使用select>option標籤的時候發現沒有辦法操控option的不少樣式，好比line-height等，還會由此致使在IE8及如下版本瀏覽器中的各類問題。

這個模擬思路很簡單，也很清晰，我就直接上代碼了

html：

第一層div是模擬select標籤，第二層div是模擬option下拉列表

1 <div>
2     <div class="sim-select"></div>
3 </div>
4 <div class="sim-downList">
5 
6 </div>

css：

這個按需求可本身隨意擴展隨意調

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

js：

Ps:記得引用jq庫

我是本身模擬的types數據，能夠添加form，拓展爲獲取後臺數據等。

 1 var types = [{name:"選擇11111"},{name:"選擇222222"},{name:"選擇333333"},{name:"選擇4444444"},{name:"選擇55555"}];
 2         var $select = $(".sim-select"),$downList = $(".sim-downList"), i,$length = types.length;
 3         for(i=0;i<$length;i++) {
 4             $downList.append("<div class='sim-option'>" + types[i].name + "</div>")
 5         }
 6         $select.text(types[0].name);
 7         $select.click(function () {
 8 
 9             if($downList.is(":visible")){
10                 $downList.hide();
11             }
12             else {
13                 $downList.show();
14             }
15         });
16         $(".sim-option").click(function () {
17             var _this = this;
18             var text = _this.textContent;
19             $select.text(text);
20         })

具體效果：

 

以上純屬本人的拙見，懇請指出不足之處，共勉。^_^