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) {
