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

具体效果：

 

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