首页 > 代码库 > 自定义Jquery 下拉框

自定义Jquery 下拉框

(function ($){    ‘use strict‘;    var g_id = 0;    var g_open_id = [];    $.fn.select3 = function () {        var _id = g_id++;        var _isShow = false;        var _this = $(this);        var _val = _this.children(‘option:selected‘).text();        var _w = _this.css(‘width‘);        var tpl = ‘<dl class="select2_wrap" style="width:‘+_w+‘"><dt class="open-dt" id="select2_title‘+ _id +‘" data-val=""><span>‘+_val+‘</span><i class="fa fa-sort-down"></i></dt>‘;        _this.children(‘option‘).each(function (){            tpl += ‘<dd style="display:none" data-val="‘+ $(this).val() +‘">‘ + $(this).text() + ‘</dd>‘;        });        tpl += ‘</dl>‘;        _this.hide().before(tpl);        _this.bind(‘change‘, function () {            $(‘#select2_title‘).text($(this).val()).attr(‘data-val‘, $(this).val());        });        $(‘#select2_title‘+_id).attr(‘data-val‘, $(this).val());        $(‘#select2_title‘+_id).siblings().click(function () {            var text = $(this).text();            var _val = $(this).attr(‘data-val‘);            _this.val(_val);            $(‘#select2_title‘+_id).attr(‘data-val‘,$(this).attr(‘data-val‘)).children(‘span‘).text(text);            $(this).parent(‘dl‘).children(‘dd‘).slideUp(200, function() {                $(this).siblings(‘dt‘).css({‘borderBottom‘:‘1px solid #ccc‘, ‘border-bottom-right-radius‘:‘5px‘, ‘border-bottom-left-radius‘:‘5px‘});            });            _this.change();        });        $(‘#select2_title‘+_id).click(function() {            $(‘dd‘).slideUp(100, function () {                $(‘dt[role-page]‘).attr(‘style‘, ‘‘);            });            var _id = $(this).attr(‘id‘);            g_open_id.push(_id);            $.each(g_open_id, function(i) {                if (g_open_id[i] != _id) {                    $(‘#‘+g_open_id[i]).siblings(‘dd‘).slideUp(200, function () {                        $(this).siblings(‘dt‘).css({‘borderBottom‘: ‘1px solid #ccc‘, ‘border-bottom-right-radius‘: ‘5px‘, ‘border-bottom-left-radius‘: ‘5px‘});                    });                    delete g_open_id[i];                }            });            _isShow  = $(this).siblings(‘dd‘).css(‘display‘) == ‘none‘ ? false : true;            if (!_isShow) {                $(this).css({‘borderBottom‘:‘none‘, ‘border-bottom-right-radius‘:‘0‘, ‘border-bottom-left-radius‘:‘0‘});                $(this).siblings(‘dd‘).slideDown(300);            }else{                $(this).siblings(‘dd‘).slideUp(200, function () {                    $(this).siblings(‘dt‘).css({‘borderBottom‘: ‘1px solid #ccc‘, ‘border-bottom-right-radius‘: ‘5px‘, ‘border-bottom-left-radius‘: ‘5px‘});                });            }        });        $(window).click(function(e){            var pType = e.target.tagName;            var className = e.target.className;            if (pType == ‘I‘ || pType == ‘SPAN‘) {                className = e.target.parentElement.className;            }            if (className == ‘open-dt‘) {                return;            }            $(‘dd‘).slideUp(100, function () {                $(‘.select2_wrap‘).children(‘dt‘).css({‘borderBottom‘: ‘1px solid #ccc‘, ‘border-bottom-right-radius‘: ‘5px‘, ‘border-bottom-left-radius‘: ‘5px‘});                $(‘dt[role-page]‘).attr(‘style‘, ‘‘);            });        });    };})(jQuery);

 

样式:

/* select3 style */.select3-wrap{    display: inline-flex;    height: 30px;    width: 100%;}.select2_wrap{    height: 30px;    line-height: 30px;    margin:0;    padding:0;    text-align:left;    display: inline-block;    font-size: 12px;    z-index: 9999;}.select2_wrap dt{    border:1px solid #ccc;    border-radius: 5px;    padding-left:10px;    font-weight: normal;    cursor:pointer;    overflow: hidden;}.select2_wrap dt>i{    float:right;    margin-right: 10px;    margin-top:3px;}.select2_wrap dd{    padding-left:10px;    background-color: #FFFFFF;    border-left: 1px solid #ccc;    border-right: 1px solid #ccc;}.select2_wrap dd:last-child{    border-bottom:1px solid #ccc;    border-bottom-left-radius: 5px;    border-bottom-right-radius: 5px;    height: 35px;}.select2_wrap dt, .select2_wrap dd{    height:30px;    line-height: 30px;}.select2_wrap dd:hover{    background-color:#414C59;    color:white;    cursor:pointer;}

 

效果:

 

 

自定义Jquery 下拉框