jQuery多选列表的改进

IE自带的select控件实在不好看..

这里改造了Ethan Miller的一个基于jQuery 的 Simple Multi-Select, 让其能重新构建, 这样便可以在不断变化的多选select中使用了.
目前这里有个小问题,列表在IE6下会出现click错误.考虑了一下,还是使用change来代替click事件.还未能查到是否为jQuery在IE6下兼容问题.

/* jQuery Simple Multi-Select plugin 0.9
 *
 * Copyright (c) 2009 Ethan Miller
 * http://ethanmiller.name/notes/jquery_simplemultiselect/
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 */

(function($){
 	$.fn.extend({
		simpleMultiSelect : function(options){
			settings = $.extend({
				highlight : '#CCE',
				border : '#777',
				width : 350,
				height : 150}, options);
			var select = this;
			return this.each(function(){
				// wrapping select in a div so that the select and pseudo select 
				// will be siblings
				$(this).wrap('<div class="sms-container"></div>');
				var divselect = $('<div class="sms-pseudo-select"></div>');
				$('option', this).each(function(){
					var op = $(this);
					var dv = $('<div/>').data('v', op.val()).text(op.text());
					dv.css({"cursor" : "pointer", "border-bottom" : "1px solid #ABB3DE"});
					if(op.attr('selected')){
						// highlight pseudo option on load
						dv.css({'background-color' : settings.highlight, "font-weight" : "bold"});
					}
					dv.click(function(){
						// we still have references to op and dv here ...
						if(op.attr('selected')){
							//de-select
							op.removeAttr('selected');
							dv.css({'background-color' : 'transparent', "font-weight" : "normal"});
						}else{
							//select
							op.attr('selected', true);
							dv.css({'background-color' : settings.highlight, "font-weight" : "bold"});
						}
						select.click();		//IE6在这里会出现问题
					});
					divselect.append(dv);
				});
				divselect.css({
					width : settings.width,
					height : settings.height,
					cursor : "default",
					overflow : "auto",
					border : "1px solid " + settings.border});
				$(this).after(divselect).hide();
			});
//			return this;
		},
		//如果实体Select发生变化,需要rebuilt一下
		rebuilt : function(){
			var select = this;
			return this.each(function(){
				// wrapping select in a div so that the select and pseudo select 
				// will be siblings
				select.parent().find(".sms-pseudo-select").remove();
				var divselect = $('<div class=\"sms-pseudo-select\"></div>');
				$('option', this).each(function(){
					var op = $(this);
					var dv = $('<div/>').data('v', op.val()).text(op.text());
					dv.css({"cursor" : "pointer", "border-bottom" : "1px solid #ABB3DE"});
					if(op.attr('selected')){
						// highlight pseudo option on load
						dv.css({'background-color' : settings.highlight , "font-weight" : "bold"});
					}
					dv.click(function(){
						// we still have references to op and dv here ...
						if(op.attr('selected')){
							//de-select
							op.removeAttr('selected');
							dv.css({'background-color' : 'transparent', "font-weight" : "normal"});
						}else{
							//select
							op.attr('selected', true);
							dv.css({'background-color' : settings.highlight, "font-weight" : "bold"});
						}
						select.change();
					});
					divselect.append(dv);
				});
				divselect.css({
					width : settings.width,
					height : settings.height,
					cursor : "default",
					overflow : "auto",
					border : "1px solid " + settings.border});
				$(this).after(divselect).hide();
			});
//			return this;
		},
		smsNone : function(){
			return this.each(function(){
				siblingDivSet(this).each(function(){
					var psop = $(this);
					if(psop.css('background-color') != 'transparent'){
						psop.click();
					}
				});
			});
		},
		smsAll : function(){
			return this.each(function(){
				siblingDivSet(this).each(function(){
					var psop = $(this);
					if(psop.css('background-color') == 'transparent'){
						psop.click();
					}
				});
			});
		}
	});
	function siblingDivSet(sel){
		// expects a select object, return jquery set
		return $(sel).siblings('div.sms-pseudo-select').children('div');
	}
})(jQuery);

使用时加载, 页面运行时需要重建select的话也是如下:

$("#yearSelector").simpleMultiSelect({
		highlight : '#BFDAEB',
		border : '#7f9db9',
		width : 125,
		height : 80
	});
//重建
$("#yearSelector").rebuilt();
//全选
$("#yearSelector").smsAll();
//反选
$("#yearSelector").smsNone();

效果图如下: