首页 > 代码库 > 自定义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 下拉框
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。