jq仿select标签，兼容IE7

最新推荐文章于 2022-04-28 14:40:05 发布

原创最新推荐文章于 2022-04-28 14:40:05 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jq #js #select #IE7

js 专栏收录该内容

5 篇文章

订阅专栏

一直相找一个可以兼容IE7的select标签，可好多插件都太大，用起来太麻烦，所以自己写了一款，亲测，可以兼容IE7，有不足之处还请多多指教。。

html:

<div class="clearfix">
            
            <!--my-select-->
            <div class="my-select">
                <div class="my-select-btn">未分类11</div>
                <div class="my-select-wrap">
                    <dl class="my-select-info">
                        <dd>未分类11</dd>
                        <dd>正文</dd>
                        <dd>来源类型</dd>
                        <dd>分类</dd>
                        <dd>相关主题</dd>
                        <dd>相关主题</dd>
                        <dd>相关主题</dd>
                    </dl>
                </div>
            </div>
            <!---->


            <!--my-select-->
            <div class="my-select">
                <div class="my-select-btn">未分类11</div>
                <div class="my-select-wrap">
                    <dl class="my-select-info">
                        <dd>未分类11</dd>
                        <dd>正文</dd>
                        <dd>来源类型</dd>
                        <dd>分类</dd>
                        <dd>相关主题</dd>
                    </dl>
                </div>
            </div>
            <!---->

        </div>

css:

/*select*/
.my-select {position: relative;  display: block; width: 80px; height: 32px;border: 1px solid #dfdfdf;border-radius: 4px;background: url('../img/select-arr-b.png') no-repeat right center #fff;padding-right: 32px;cursor: pointer; text-indent: 10px;}
.my-select .my-select-btn{ line-height: 32px; border-radius: 3px; margin: 0; }
.my-select .my-select-wrap{display: none; position: absolute;  left: -1px; top:100%;margin-top: 5px; background: #fff;border: 1px solid #dfdfdf; width: 100%;}
.my-select-active{z-index: 999;background-image: url("../img/select-arr-t.png");}
.my-select-active .my-select-wrap{display: block;box-shadow: 0 2px 2px #f1f1f1}
.my-select .my-select-info{background: #fff; overflow: auto; max-height: 120px;line-height: 1.8; padding-bottom: 10px;}
.my-select .my-select-info dd:hover{background: #f1f1f1}
.my-select-relative{position: relative;z-index: 99;}

js:

$(function () {
    var btn = $('.my-select'),mark = false,last;
    btn.click(function () {
        var select = $(this),
            val = select.find('.my-select-btn');
        select.addClass('my-select-active');
        mark = true;
        if(select.parents().is('.clearfix')) {
            select.parents('.clearfix').addClass('my-select-relative');
        }
        last = select;
        setTimeout(function () {
            if(mark){
                $('body').on('click',function (e) {
                    var target = $(e.target);
                    if(target.parent().is('.my-select-info') && (target.parents().is('.my-select-active'))){
                        val.html(target.html());
                    }
                    if(target.hasClass('my-select-btn')){
                        $('body').unbind();
                    }else{
                        $('body').unbind();
                        mark = false;
                        last = null;
                    }
                    if($('.my-select-active').length>0){
                        select.removeClass('my-select-active');
                    }
                    if($('.my-select-relative')){
                        select.parents('.clearfix').removeClass('my-select-relative');
                    }
                })
            }
        },30)
    })
});