個人博客：

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 })

具體效果：

?

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

轉載于:https://www.cnblogs.com/McChen/p/4729529.html

總結

以上是生活随笔為你收集整理的div模拟select/option解决兼容性问题及增加可拓展性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。