自定义 select 下拉菜单

 

.selectBeautifyMainStyle{ color: #9fa0a0; font-size: 14px; font-family: "alegreya_sansthin"; text-transform: uppercase; width:415px; height:45px; line-height:45px; border:1px solid #D1D1D1; float:left; padding: 0 50px 0 10px; cursor:pointer; position: relative; margin-bottom: 25px; }
.selectBeautifyMainStyle span { display: block; position: absolute; top: 8px; right: 0; border-left: 1px solid #d1d1d1; width: 50px; height: 29px; background: url(../images/crlaine/selectopen.png) no-repeat 15px 10px;}
.selectBeautifyMenuStyle{ color: #005e79; font-size: 14px; font-family: "alegreya_sansthin"; text-transform: uppercase; width:415px; height:300px; border:1px solid #D1D1D1; padding:10px; position:absolute; z-index:99999; left:0; top:45px; background:#FFF; overflow-y:auto; display:none;}
.selectBeautifyMenuStyle *{ padding: 0; margin: 0; }
.selectBeautifyMenuStyle ul{ list-style-type: none; }
.selectBeautifyMenuStyle li{ height: 35px; line-height: 35px;  cursor: pointer; }
.selectBeautifyMenuStyle li.current-selected { color: #9fa0a0; }
.selectBeautifyMenuStyle li.bg-color { background-color: #f1f1f1; }

        // custom select-box function
        function selectBeautify(id, mainStyle, menuStyle){
            this.obj = $('#' + id);
            this.mainStyle = mainStyle;
            this.menuStyle = menuStyle;
            this.run = function() {
                this.obj.hide();
                var cpObj = this.obj;
                var mainHtml  = '<div class="' + this.mainStyle + '">' + this.obj.find(":selected").html() + '<span></span></div>';
                this.obj.after(mainHtml);
                var menuHtml  = '<div class="' + this.menuStyle + '"><ul>';
                this.obj.find('option').each(function(){
                    menuHtml += "<li>"+$(this).html()+"</li>";
                });
                menuHtml += '</ul></div>';
                this.obj.next().after(menuHtml);

                //Binding click event
                this.obj.next().click(function(){
                    event.stopPropagation();

                    if($(this).next().is(':visible')){
                        $(this).next().slideUp(0);
                        return false;
                    }
                    $(this).parent().css({'position':'relative'});
                    $(this).next().slideDown();
                    $(this).next().css({'overflow-y':'auto'});

                    // current selected color
                    var currentText = $(this).text();
                    $(this).next().find('li').each(function() {
                        if ($(this).text() == currentText) {
                            $(this).addClass('current-selected').siblings().removeClass('current-selected');
                        }
                    });

                    //Binding the mouse events
                    // $(this).next().hover(function(){},function(){$(this).slideUp(0);});
                    $(document).click(function(){
                        cpObj.next().next().slideUp(0);
                    });

                    //Click select event binding
                    $(this).next().find('li').click(function(){
                        cpObj.next().html($(this).html() + '<span></span>');
                        cpObj.get(0).selectedIndex = $(this).index();
                        cpObj.find('option').eq($(this).index()).attr('selected', 'selected').siblings().removeAttr('selected');
                        cpObj.next().next().hide();
                    });

                    //mouse after li
                    $(this).next().find('li').hover(
                        function(){
                            $(this).addClass('bg-color');
                        },
                        function(){
                            $(this).removeClass('bg-color');
                        }
                    );

                });
            }
        }
        var countrySelector = new selectBeautify('field69', 'selectBeautifyMainStyle', 'selectBeautifyMenuStyle');
        countrySelector.run();

 

移出DIV后自动隐藏

        // custom select-box function
        function selectBeautify(id, mainStyle, menuStyle){
            this.obj = $('#' + id);
            this.run = function() {
                this.obj.hide();
                var cpObj = this.obj;

                var mainHtml  = '<div class="select-box"><div class="' + mainStyle + '">' + this.obj.find(":selected").html() + '<span></span></div>';
                var menuHtml  = '<div class="' + menuStyle + '"><ul>';
                this.obj.find('option').each(function(){
                    menuHtml += '<li>'+$(this).html()+'</li>';
                });
                menuHtml += '</ul></div></div>';
                this.obj.after(mainHtml + menuHtml);

                //Binding click event
                this.obj.next().children('.' + mainStyle).click(function(){
                    if($(this).next().is(':visible')){
                        $(this).next().stop().slideUp(0);
                        return false;
                    }

                    $(this).parent().css({'position':'relative'});
                    $(this).next().slideDown();
                    $(this).next().css({'overflow-y':'auto'});

                    // current selected color
                    var currentText = $(this).text();
                    $(this).next().find('li').each(function() {
                        if ($(this).text() == currentText) {
                            $(this).addClass('current-selected').siblings().removeClass('current-selected');
                        }
                    });

                    //Binding the mouse events
                    cpObj.next().hover(function(){},function(){$(this).children('.' + menuStyle).stop().slideUp(0);});
//                    $(this).next().hover(function(){},function(){$(this).slideUp(0);});

                    //Click select event binding
                    $(this).next().find('li').click(function(){
                        cpObj.next().children('.' + mainStyle).html($(this).html() + '<span></span>');
                        cpObj.get(0).selectedIndex = $(this).index();
                        cpObj.find('option').eq($(this).index()).attr('selected', 'selected').siblings().removeAttr('selected');
                        cpObj.next().children('.' + menuStyle).hide();
                    });

                    //mouse after li
                    $(this).next().find('li').hover(
                        function(){
                            $(this).addClass('bg-color');
                        },
                        function(){
                            $(this).removeClass('bg-color');
                        }
                    );

                });
            }
        }
        var countrySelector = new selectBeautify('field69', 'selectBeautifyMainStyle', 'selectBeautifyMenuStyle');
        countrySelector.run();