jQuery 插件练习多选下拉列表

页面展示效果如下：

插件代码如下：

ccombobox.js

(function($) {
	/*
	功能：实现一个下拉列表，此下拉列表中的数据可以多选
	可以设置 1）下拉列表的宽度，2）下拉表面板的高度 
	3）显示的数据 数据格式如下
	[
	{value:"01",text:"立即生效"},
	{value:"02",text:"下月生效"},
	{value:"03",text:"前台录入"}
	]
	
	*/
	$.fn.ccombobox = function() {
		var method = arguments[0];
		if ($.fn.ccombobox.methods[method]) {
			method = $.fn.ccombobox.methods[method];
			arguments = Array.prototype.slice.call(arguments, 1);
		} else if (typeof method === "object" || !method) {
			method = $.fn.ccombobox.methods.init;
		} else {
			$.error("Method " + method + " does not exist!");
			return this;
		}
		return method.apply(this, arguments);
	};
	
	$.fn.ccombobox.methods = {
		init : function() {
			var ops = $.extend({}, $.fn.ccombobox.defaults, arguments[0] || {});
			return $(this).each(function() {
				var sel = $('<select id="'+ ops.id +'" style="'+ops.width+'px"></select>');
				var dat = ops.data;
				console.log(dat);
				var j=0;
				var v_sel_cont ="";
				for (j=0; j< dat.length; j++)
				{
					v_sel_cont += '<input type="' + ops.type + '" value="' +dat[j].value +'"><span>'+dat[j].text +'</span><br/>'
				}
				
				var sel_cont=$('<div id="' + ops.id+'_cont"'+'>'+
								v_sel_cont +
							 '</div>');
							 
				$("body").append(sel_cont)
				$(this).append(sel);
				
				$('#'+ops.id).combo({
						editable:ops.editable,
						panelHeight:ops.panelHeight
					});
					
				$('#'+ops.id + '_cont' ).appendTo( $('#'+ops.id).combo('panel' ) );
			
			
				var sel_cont_input = $('#'+ops.id + '_cont' + ' input');
				sel_cont_input.click(function(){
					var objs = sel_cont_input;
					console.log(objs);
					var i ;
					var t ="" ;
					var v ="" ;
					for(i=0; i<objs.length; i++)
					{
						var obj = objs[i];
						console.log(obj);
						if("checked" == $(obj).attr("checked") )
						{
							t += $(obj).next("span").text() + ",";
							v += $(obj).val() +",";
						}
						
					}
					if("" != t)
					{
						t = t.substr(0, t.length-1);
						v = v.substr(0, v.length-1);
					}
					console.log(t);
					console.log(v);
					$('#'+ops.id).combo("setText",t).combo("setValue",v);
					$('#'+ops.id).combo('hidePanel');
				});
			
			});
		}
	};
	
	$.fn.ccombobox.defaults = {
		id : "",
		type: "checkbox",
		data:{},
		200,
		panelHeight:80,
		editable:false
	};
	
})(jQuery);

　　下拉列表数据文件：data.js

var DATA = DATA || {};

DATA.efftype=[
	{value:"01",text:"立即生效"},
	{value:"02",text:"下月生效"},
	{value:"03",text:"前台录入"}
];

DATA.exptype=[
	{value:"01",text:"立即失效"},
	{value:"02",text:"月底失效"},
	{value:"03",text:"前台录入"}
];

　　页面展示代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
		<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css"/>
        <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css"/>
 		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="style/js/data.js"></script>
		<script type="text/javascript" src="style/js/plugin/ccombobox.js"></script>
		<script>
			$(function(){
				$("#test").ccombobox({
					id : "efftype",
					data:DATA.efftype,
					300,
					panelHeight:100
				});
				$("#test2").ccombobox({
					id : "exptype",
					data:DATA.exptype,
					300,
					panelHeight:100
				});
			 
			});
		</script>
		<title>test</title>

	</head>
	<body >
		<div id="test"></div>
		<div id="test2"></div>
	</body>
</html>

jQuery 插件练习 多选下拉列表

jQuery 插件练习多选下拉列表