自制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);
CSS 代码：
/* 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;
}
禁用效果：
常态：
