自制Jquery下拉框插件

(function ($) {
$.fn.select3 = function (option) { $(this).each(function () {
var _this = $(this);
var isInit = _this.prev('div').hasClass('select3-parent');
if(isInit){
_this.prev('div.select3-parent ').remove();//清空之前的组件
} var _default = {
className: 'select3-parent', //下拉框样式可自定义
width: '100px'
}; //是否是禁用状态
var isDisabled = _this[0].attributes.disabled;
if (isDisabled) {
_default.className += ' select3-disabled';
} //默认会根据元素设置的宽度给设置宽度，这里最好设置原始下拉框的宽度 //合并自定义属性
_default = $.extend(_default, option);
var _data_val = _this.children('option:checked').attr('value'); //默认选中项的值
_data_val = (_data_val ? _data_val : '-')
var _text = _this.children('option:checked').text().trim(); //默认选中项的文本
_text = (_text ? _text : '-');
var hasBorder = _default.border == false ? 'no-border' : ''; var _tplWrap = '<div class="'+ _default.className +' '+ hasBorder+'" style="width:'+ _default.width+'">' +
'<div class="select3-topic" data-val="'+ _data_val +'"><span>'+ _text +
'</span><i class="fa fa-sort-down"></i></div><ul class="select3-ul" style="width:'+ _default.width+'">'; _this.children().each(function () {
var _this = $(this);
var _data_val = $(this).attr('value');
var _text = $(this).text().trim();
var _disabled = _this.attr('disabled'); if (_this.is('optgroup')) {
_text = _this.attr('label');
_data_val = 'group';
_tplWrap += '<li data-val="'+ _data_val +'" class="select3-group">'+ _text + '<ul>';
_this.children().each(function () {
_text = $(this).text().trim();
_data_val = $(this).attr('value');
_tplWrap += '<li data-val="'+ _data_val +'">'+ _text +'</li>';
});
_tplWrap += '</ul></li>';
}else{
if (_disabled) {
_tplWrap += '<li data-val="'+ _data_val +'" disabled="disabled">'+ _text +'</li>';
} else {
_tplWrap += '<li data-val="'+ _data_val +'">'+ _text +'</li>';
}
}
}); _tplWrap += '</ul></div>'; _this.addClass('hide');//隐藏当前控件 _this.before(_tplWrap)//显示插件化后的控件 //绑定下拉事件
$('.select3-topic').unbind().on('click', function () {
var isDisabled = $(this).parent('div').hasClass('select3-disabled');
if (isDisabled) {
return;
} $('.open').not($(this).parent('div')).removeClass('open');
$(this).addClass('open');
$(this).children().addClass('open');
$(this).parent('div').toggleClass('open');
}); //绑定行点击事件
$('.select3-ul li[data-val!="group"]').unbind().on('click', function () {
var _parent = $(this).parents('.select3-ul');//获取父标签
var _val = $(this).attr('data-val');
var _text = $(this).text();
var _disabled = $(this).attr('disabled'); if (_parent.siblings('div').attr('data-val') == _val || _disabled) {
return;
} _parent.siblings('div').attr('data-val', _val);
_parent.siblings('div').find('span').text(_text);
_parent.parent('div').removeClass('open');//隐藏父标签
_parent.parent('div').next('select').val(_val);//设置select值 _parent.parent('div').next('select').change();
});
}); //body click 去除下拉
$('body').unbind().click(function(e){ var pType = e.target.tagName;
var className = e.target.className;
var reg = new RegExp('open') if (pType == 'I' || pType == 'SPAN') {
className = e.target.parentElement.className;
} if (className == 'open-dt' || pType == 'DT' || reg.test(className)) {
return;
} $('.open').removeClass('open');//select3第2版
}); };
})(jQuery);

/* select3 容器最外层未点开样式 */
.select3-parent{
font-family: Arial,"Microsoft YaHei";
font-size: 12px;
display: inline-block;
border-radius: 5px;
border:1px solid #dfdfdf;
height: 30px;
line-height: 30px;
cursor: pointer;
position: relative;
background-color: #ffffff;
color: #666666;
min-width: 60px;
vertical-align: top;
}.select3-disabled{
color:#999;
cursor:default;
background-color:#eee;
}.no-border{
border:none;
bottom: -5px;
}.select3-topic{
height: 30px;
line-height: 30px;
/*overflow: hidden;*/
padding-left: 10px;
padding-right: 10px;
}.select3-topic span{
height: 30px;
display: inline-block;
width: 88%;
overflow: hidden;
text-overflow:ellipsis;
}.select3-topic i{
float:right;
margin-top:5px;
}/* select3 下拉内容 */
.select3-ul{
display: none;
position: absolute;
list-style: none;
padding:0;
margin:0;
border:1px solid #dfdfdf;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-left:-1px;
background-color: #ffffff;
z-index: 999;
overflow: auto;
max-height: 330px;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}/* 下拉内容样式 */.select3-ul li{
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
text-overflow:ellipsis;
}.select3-ul li[disabled]{
/*background-color: #eeeeee;*/
color: #dfdfdf;
}.select3-ul li:hover{
background-color: #111e30;
color: #ffffff;
}.select3-ul li[disabled]:hover{
background-color: #ffffff;
color:#dfdfdf;
cursor: default;
}/* 分组标题样式 select3-group */
.select3-ul li.select3-group{
padding-left: 0;
padding-right: 0;
text-indent: 10px;
color: black;
}.select3-group{
cursor: default;
font-weight: bold;
}.select3-group ul{
font-weight: normal;
color: #666666;
list-style: none;
padding:0;
margin:0;
}.select3-group li{
padding-left: 10px;
padding-right: 10px;
}li.select3-group:hover{
background-color: #ffffff;
color: black;
}.select3-group li:hover{
cursor: pointer;
}/* select3 容器最外层点开后样式 */
.select3-parent.open{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
border-bottom: none;
border-bottom: 1px solid #fff;
}.select3-parent.open.no-border{
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
}/* 点开后，下拉菜单内容的样式 */
.select3-parent.open .select3-ul{
display: block;
}.select3-parent.open .select3-topic{
padding:0px;
height: 29px;
margin-left: 10px;
margin-right: 10px;
border-bottom: 1px solid #dfdfdf;
}