var SelectBox = function (select, div) {
this.select = select;
this.div = div;
this.divOptions = div.find('.select_options');
this.divShow = div.find('.select_showbox');
this.selected = null;
}
var SelectD = {
_selects: {}, show: [],
load: function (select) {
select = $(select);
var sid = select.attr('data-select');
var selectBox;
if (!sid) {
if (select[0].tagName != 'SELECT') {
return false;
}
var div = this._createDiv(select);
select.hide();
select.before(div);
sid = 's' + (new Date().valueOf());
select.attr('data-select', sid);
selectBox = new SelectBox(select, div);
selectBox.divShow.on('click', selectBox, this._showboxClick);
selectBox.divOptions.on('click', selectBox, this._showOptionsClick);
this._selects[sid] = selectBox;
} else {
selectBox = this._selects[sid];
}
var selected = select.find('option:selected');
selectBox.divShow.text(selected.text());
selectBox.divOptions.html(this._createOptions(select));
return select;
}, _createDiv: function (select) {
var html = '<div class="select_box"><div class="select_showbox"></div><ul class="select_options"></ul></div>';
return $(html);
}, _createOptions: function (select) {
var html = '';
var childs = select.children();
for (var i = 0; i < childs.length; i++) {
var op = childs.eq(i);
var tagName = op[0].tagName;
if (tagName == 'OPTGROUP') {
html += '<li class="select_group">' + op.attr('label') + '</li>';
var childOp = op.children();
for (var n = 0; n < childOp.length; n++) {
var node = childOp.eq(n);
html += '<li class="select_item" data-val="' + node.val() + '">' + node.text() + '</li>';
}
} else if (tagName == 'OPTION') {
html += '<li class="select_item" data-val="' + op.val() + '">' + op.text() + '</li>';
}
}
return html;
}, _showboxClick: function (e) {
var box = e.data;
var options = box.divOptions.toggle();
if (options.is(':visible')) {
box.divShow.addClass('halo');
SelectD.show.push(box);
}
e.stopPropagation();
}, _showOptionsClick: function (e) {
var ev = e || window.event;
var dom = $(ev.target || ev.srcElement);
if (dom.is('li')) {
if (dom.hasClass('select_group')) {
e.stopPropagation();
} else if (dom.hasClass('select_item')) {
var box = e.data;
if (box.selected) {
box.selected.removeClass('select_active');
}
dom.addClass('select_active');
var sTxet = dom.text();
var sValue = dom.attr('data-val');
box.select.val(sValue);
box.select.trigger('change');
box.selected = dom;
box.divShow.text(sTxet);
}
}
}, closeAll: function () {
for (var i = SelectD.show.length - 1; i >= 0; i--) {
var box = SelectD.show[i];
box.divOptions.hide();
box.divShow.removeClass('halo');
SelectD.show.splice(i, 1);
}
}, init: function () {
$(document).on('click', SelectD.closeAll);
}
};
$(SelectD.init);
$.fn.SelectLoad = function () {
SelectD.load(this);
}
提示：你可以先修改部分代码再运行。
转载请注明：有爱前端 » 来,把select改一下
