jQuery模拟Select下拉框

使用jQuery模拟美观的Select下拉框

最新推荐文章于 2021-02-09 03:14:10 发布

转载最新推荐文章于 2021-02-09 03:14:10 发布 · 770 阅读

android 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何利用jQuery实现自定义Select下拉框样式，解决浏览器间样式不一致的问题，提供HTML、CSS及jQuery代码实现步骤。

转自:http://www.zjgsq.com/1268.html

select几乎我们都会碰到，而默认的select下拉框很难看。而且各个浏览器的SELECT下拉框的默认样式都不一样，可能在CHROME里很美观，但是一到IE就丑爆了。这里我们用jQuery来模拟Select下拉框。

jQuery-select

HTML代码

 
  
        <
        div 
        class
        =
        "selectContainer"
        > 
       

                    
        <
        span 
        class
        =
        "selectOption gray"
        >点击选择下拉框内容</
        span
        > 
       

                    
        <
        ul 
        class
        =
        "selectMenu"
        > 
       

                        
        <
        li
        >江西省</
        li
        > 
       

                        
        <
        li
        >广东省</
        li
        > 
       

                        
        <
        li
        >江苏省</
        li
        > 
       

                        
        <
        li
        >河北省</
        li
        > 
       

                        
        <
        li
        >湖南省</
        li
        > 
       

                    
        </
        ul
        > 
       

                    
        <
        span 
        class
        =
        "shows"
        ></
        span
        > 
       

         
        </
        div
        >
       
 
 

CSS代码

 
  
        /* ---- Select ----*/ 
       

        .selectContainer{
        position
        :
        relative
        ; 
        width
        :
        262px
        ; 
        display
        :inline-
        block
        ; 
        _display
        :
        inline
        ; _zoom:
        1
        ; 
        z-index
        :
        1000
        ; 
        background
        :
        #FFF
        ; 
        border
        :
        1px 
        solid 
        #CCC
        } 
       

        .selectContainer input{} 
       

        .selectContainer .selectOption{
        min-width
        :
        180px
        ; 
        padding
        :
        0 
        5px
        ; 
        line-height
        :
        25px
        ; 
        height
        :
        25px
        ; 
        white-space
        :
        nowrap
        ; 
        overflow
        :
        hidden
        ;
        border
        :
        none
        ; 
        width
        :
        250px
        ; 
        z-index
        :
        1000
        } 
       

        .selectContainer .shows{
        width
        :
        20px
        ; 
        height
        :
        20px
        ; 
        position
        :
        absolute
        ; 
        right
        :
        2px
        ; 
        top
        :
        2px
        ; 
        background
        :
        url
        (images/select-ico.gif) 
        no-repeat 
        center 
        center
        } 
       

        .selectContainer ul{
        position
        :
        absolute
        ; 
        width
        :
        100%
        ; 
        top
        :
        25px
        ; 
        left
        :
        -1px
        ; 
        border-bottom
        :
        1px 
        solid 
        #CCC
        ; 
        display
        :
        none
        ;} 
       

        .selectContainer ul li{
        padding
        :
        0 
        5px
        ; 
        border
        :
        1px 
        solid 
        #CCC
        ; 
        border-bottom
        :
        1px 
        solid 
        #EEE
        ; 
        border-top
        :
        none
        ; 
        line-height
        :
        25px
        ; 
        width
        :
        252px
        ; 
        background
        :
        #FFF
        ; 
        cursor
        :
        pointer
        } 
       

        .selectContainer ul li:hover{
        background
        :
        #F5F5F5
        } 
       

         
       

        .selectContainer ul.dis{
        display
        :
        block
        !important
        ;} 
       

        .selectContainer ul.undis{
        display
        :noneimportant;} 
       

        .zIndex{
        z-index
        :
        10000
        !important
        } 
       

        .selectContainer .
        gray
        {
        color
        :
        #DDD
        }
       
 
 

jQuery代码

使用前记得引入jQuery

 
        (
        function
        ($){ 
       
        jQuery.fn.select = 
        function
        (options){ 
       
        return 
        this
        .each(
        function
        (){ 
       
        var 
        $
        this 
        = $(
        this
        ); 
       
        var 
        $shows = $
        this
        .find(
        ".shows"
        ); 
       
        var 
        $selectOption = $
        this
        .find(
        ".selectOption"
        ); 
       
        var 
        $el = $
        this
        .find(
        "ul &gt; li"
        ); 
       
        $
        this
        .click(
        function
        (e){ 
       
        $(
        this
        ).toggleClass(
        "zIndex"
        ); 
       
        $(
        this
        ).children(
        "ul"
        ).toggleClass(
        "dis"
        ); 
       
        e.stopPropagation(); 
       
        }); 
       
        $el.bind(
        "click"
        ,
        function
        (){ 
       
        var 
        $this_ = $(
        this
        ); 
       
        $
        this
        .find(
        "span"
        ).removeClass(
        "gray"
        ); 
       
        $this_.parent().parent().find(
        ".selectOption"
        ).text($this_.text()); 
       
        }); 
       
        $(
        "body"
        ).bind(
        "click"
        ,
        function
        (){ 
       
        $
        this
        .removeClass(
        "zIndex"
        ); 
       
        $
        this
        .find(
        "ul"
        ).removeClass(
        "dis"
        );     
       
        }) 
       
        //eahc End   
       
        }); 
       
        } 
       
        })(jQuery); 
       
        $(
        ".selectContainer"
        ).select();  
        //调用