js修改select的默认样式，兼容到ie8

笑到世界都狼狈

已于 2022-11-11 09:36:39 修改

阅读量1.7k

点赞数

分类专栏： ie8相关问题文章标签： js/jq 修改select的样式美化select 兼容到ie8

于 2019-09-06 17:46:01 首次发布

ie8相关问题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们公司的项目都是要兼容到ie8的，ie8的好多兼容性问题都很让人头疼，比如说select标签，我本来可以用-webkit-appearance: none;把他的默认样式去掉，然后在给它后面加一个自定义的箭头，但是ie8就是不起作用。

于是我在网上下了一段代码，在外面运行是可以的，但是放到我的项目里死活都有问题，后来我就稍稍修改了一下原本的js文件，来实现我想要的效果。

简单的说就是将原来的select标签隐藏起来，然后在select之前插入一个无序列表来显示原来的下拉列表，但是我项目中需要的还有

option的value值，要传给后台，所以我就简单的做了一下修改，将value也传给li，但是选完之后显示在页面的标签又是一个div,所以我就给div也attr了一个value属性，这样往后台传数据的时候传的就是这个div的value值了。

好了，话不多说，上代码，代码有点乱，凑合看吧，时间有点紧迫，没时间整理，希望大家多多谅解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    /*修改select样式*/
    *{margin:0;padding:0;}
    ul{list-style:none;}
    a{text-decoration:none;}
    select{display: none;}
    .select_box{width: 200px;background: #ccc;}
    .select_option{border: 1px solid #b0a296;border-top: none;display: none;position: relative;background: #ffffff;z-index: 12;max-height: 125px;overflow-y: auto;}
    .select_option li{padding-left: 5px;}
    .select_option li.selected{background-color: #F3F3F3;color: #999;}
    .select_option li.hover{background: #7b6959; color: #fff;}
    .select_showbox{background: url(../image/pc/arrowSelect.png) no-repeat 225px 8px;text-align: left;padding-left: 6px;}

    </style>
</head>
<body>
    <div class="select-area">
        <span class="select-value"></span>
        <select id="provice">
           <option value="0">福建</option>
           <option value="1">厦门</option>
        </select>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        /**
         * 美化select下拉列表框
         * 下拉框在每个浏览器中显示的效果不一样，为了统一，将select隐藏起来，用ul li无序列表代替
         * 需要注意的是(原本向后台传值是option的值，现在美化select之后需要修改传入的值)
         * @type {jQuery|HTMLElement}
         */

        // 获取页面中所有的select标签
        var selects=$('select');
        for(var i=0;i<selects.length;i++){
            createSelect(selects[i],i);
        }

        /**
         * 创建一个类似ul li无序列表来代替select标签
         * 插在select标签之前，class为select_box
         * @param select_container
         * @param index
         */
        function createSelect(select_container,index){
            //创建select容器，class为select_box，插入到select标签前
            var tag_select=$('<div></div>');//div相当于select标签
            tag_select.attr('class','select_box');
            tag_select.insertBefore(select_container,index);
            //显示框class为select_showbox,插入到创建的tag_select中
            var select_showbox=$('<div></div>');//显示框
            select_showbox.css('cursor','pointer').css('display','block').attr('class','select_showbox').appendTo(tag_select);
            //创建option容器，class为select_option，插入到创建的tag_select中
            var ul_option=$('<ul></ul>');//创建option列表
            ul_option.attr('class','select_option');
            ul_option.appendTo(tag_select);
            createOptions(index,ul_option);//创建option
            //点击显示框
            tag_select.click(function(){
                ul_option.toggle();
            });
            var li_option=ul_option.find('li');
            li_option.on('click',function(){
                $(this).addClass('selected').siblings().removeClass('selected');
                var value=$(this).text();
                var va = $(this).val();
                //select_showbox为div容器
                //select_showbox.attr('value',va);---div没有value值，给div添加一个value属性，将value值赋值进去，

                 //到时候要传给后台
                //我上面给select取了个id,就是为了区分每个页面上有多个select的情况，这个时候传给后台的参数        //是$("#provice").prev().find('div').attr("value")
                //既找个这个select的前一个兄弟下面的div，在拿到我们给div自定义的value属性,传给后台就好了
                //select_showbox.text(value);--将select的文本显示在li标签中
                select_showbox.attr('value',va);
                select_showbox.text(value);
                setTimeout(function () {
                    $(this).parent().hide();
                },1000)

            });
            li_option.hover(function(){
                $(this).addClass('hover').siblings().removeClass('hover');
            },function(){
                li_option.removeClass('hover');
            });
        }

        /**
         * 获取被选中的元素并将其值赋值到显示框中
         * @param index
         * @param ul_list
         */
        function createOptions(index,ul_list){
            var options=selects.eq(index).find('option'),
                selected_option=options.filter(':selected'),
                selected_index=selected_option.index(),
                showbox=ul_list.prev();
            showbox.text(selected_option.text());
            //为每个option建立个li并赋值
            for(var n=0;n<options.length;n++){
                var tag_option=$('<li></li>'),//li相当于option
                    txt_option=options.eq(n).text();
                txt_value=options.eq(n).val();
                tag_option.val(txt_value)
                tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);
                //为被选中的元素添加class为selected
                if(n==selected_index){
                    tag_option.attr('class','selected');
                }
            }
        }

    </script>
</body>
</html>