脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery插件-自定义select，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 由于原生select在各个浏览器的样式不统一，特别是在IE67下直接不可以使用样式控制，当PM让你做一个样式的时候，那是相当的痛苦。最好的办法就是使用自定义样式仿select效果。这里写了一个jquery插件，实现自定义的select（阉割了不少原生select的事件，但是最主要的都还在）
需要引用的样式：
posITion: relative;
display: inline-block;
border: 1px solid #d0d0d0;
width: 250px;
height:40px;
font-Size: 14px;
}
p.self-select-wrapper{
/*解决IE67 块级元素不支持display:inline-block*/
*display:inline;
}
.self-select-wrapper .self-select-display{
display: inline-block;
cursor: pointer;
width:100%;
height:40px;
background: -moz-linear-gradient(top, #fff, #eee);
background: -o-linear-gradient(top,#fff, #eee);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, From(#fff), to(#eee));
filter: PRogid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#eeeeee);
}
.self-select-display .self-select-text{
padding-left:10px;
display: inline-block;
line-height: 40px;
width: 210px;
}
.self-select-display .self-select-arrow-down{
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
display: inline-block;
vertical-align: middle;
border-color:#aaa transparent transparent transparent;
border-style:solid dashed dashed dashed;
border-width:7px;
}
.self-select-wrapper .self-select-ul{
position: absolute;
max-height:200px;
_height:200px;
border: 1px solid #ccc;
background-color: #fff;
top:41px;
left:0px;
overflow-y: auto;
_overflow-y:auto !important;
padding:0px;
margin:0px;
width: 100%;
z-index:2014;
display: none;
}
.self-select-wrapper .self-select-ul li{
list-style: none;
}
.self-select-ul .self-select-option{
line-height: 28px;
cursor: pointer;
display: block;
padding-left:10px;
text-decoration: none;
color:#000;
}
.self-select-ul .self-select-option:hover,
.self-select-ul .current{
background-color: #eee;
}
js源码：
/**
* 解决自定义select自定义样式需求
* select父级元素谨慎使用z-index
*/
(function($){
VAR tpl = '<p class="self-select-wrapper">'+
'<span class="self-select-display">'+
'<span class="self-select-text"></span>'+
'<i class="self-select-arrow-down"></i>'+
'</span>'+
'<ul class="self-select-ul"></ul>'+
'</p>';
$.fn.selfSelect = function(changeHandler){
var name = $(this).attr('name');
var $selects = $(this);
function getSourceData($options) {
var text = [];
var value = [];
$.each($options, function() {
text.push($(this).html());
value.push($(this).attr('value'));
});
return {
text: text,
value: value
};
}
function buildTpl($selfSelect, $select) {
var valueArr =[];
var textArr = [];
var optionTpl = '';
var $options = $select.find('option');
var sourceData = getSourceData($options);
valueArr = sourceData.value;
textArr = sourceData.text;
$select.hide();
$selfSelect.find('.self-select-text').htML(textArr[0]);
$.each(textArr, function(seq, text) {
optionTpl += '<li><a class="self-select-option" href="#" value="'+valueArr[seq]+'">'+text+'</a></li>';
});
$selfSelect.find('.self-select-ul').html(optionTpl);
}
function initSelect() {
//解决多个select问题
$.each($selects, function(i, selectEl) {
var $selfSelect;
var guid = Math.floor(Math.random()*100);
var $select = $(selectEl);
var $parent = $select.parent();
if(!$select.prev().hasClass('self-select-wrapper')) {
$select.before(tpl);
$select.prev().addClass('select-' + guid);
$selfSelect = $parent.find('.select-' + guid);
}else {
$selfSelect = $select.prev();
}
buildTpl($selfSelect, $select);
initEvent($selfSelect, $select)
});
}
function initEvent($selfSelect, $select) {
$selfSelect.find('.self-select-display').off('click').on('click', function() {
var $selfSelects = $('body').find('.self-select-wrapper');
var isCliked = $(this).hasClass('clicked');
if(isCliked) {
$(this).removeClass('clicked');
$selfSelect.find('.self-select-ul').slideUp('fast');
}else {
$(this).addClass('clicked');
$selfSelect.find('.self-select-ul').slideDown('fast');
}
//防止z-index覆盖问题
$.each($selfSelects, function(i, selectEl) {
$(selectEl).css('z-index', 0);
});
$selfSelect.css('z-index', 1);
});
$selfSelect.find('.self-select-option').on(';mousedown', function() {
var text = $(this).html();
var value = $(this).attr('value');
$(this).parents('ul').slideUp('fast');
$selfSelect.find('.self-select-display').removeClass('clicked');
$selfSelect.find('.self-select-text').html(text);
$(this).addClass('current');
$(this).parent().siblings().children().removeClass('current');
//修改select的值，并触发change事件
$select.val(value);
$select.trigger('change', value);
});
$(document).on('mousedown', function(e) {
if($(e.target).hasClass('self-select-ul') || $(e.target).parent().hasClass('self-select-display')) return;
$selfSelect.find('.self-select-display').removeClass('clicked');
$selfSelect.find('.self-select-ul').slideUp('fast');
});
$select.on('change', function(e, val) {
changeHandler && changeHandler(val);
});
}
initSelect();
return this;
};
}(jQuery));
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jquery插件-自定义select全部内容，希望文章能够帮你解决javascript代码实例教程-jquery插件-自定义select所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。