1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title> New Document </title> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 10 <script type="text/javascript"> 11 <!-- 12 (function ($) { 13 $.fn.zMultiSelect = function (zSetting, zData) { 14 //默认设置 15 var defaultVal = { 16 json : true,//是否通过json对象导入选项 17 hasHidden : false,//是否需要隐藏域 18 hiddenName : "",//隐藏域的name的值 19 hasAllChecked : true,//是否需要添加全选选项 20 textSeparator : ";",//文本框中的连接符 21 valueSeparator : ";"//隐藏域中的连接符 22 }; 23 //将用户设置与默认设置合并 24 var setting = $.extend(true,{}, defaultVal, zSetting); 25 //遍历jquery对象，并返回该jquery对象 26 return this.each(function () { 27 var $this = $(this);//当前dom封装成jquery对象 28 var objId = $this.attr("id");//当前对象的id，也可用this.id来获取 29 var spanId = objId+"_span";//添加_span后缀做为悬浮框的id 30 //为当前对象绑定单击事件，先隐藏所有悬浮框，然后显示当前对象关联的悬浮框，并阻断事件继续传播 31 $this.bind('click',function(e){ 32 $("span[id$=_span]").hide(); 33 $("#"+spanId).show(); 34 e.stopPropagation();//阻断事件传播 35 }); 36 if(setting.json){ 37 //如果设置json为true，则按设置载入数据，对象前后添加隐藏域和悬浮框 38 loadJson($this,setting,zData); 39 } 40 //为当前对象关联的多选框添加单击事件 41 $("[class=" + objId + "]:checkbox").bind("click",function(e){ 42 //如果为全选复选框，则相应全选，全不选，相关选项 43 if(this.value==""){ 44 if(this.checked){ 45 $("[class=" + objId + "]:checkbox").attr("checked", true); 46 }else { 47 $("[class=" + objId + "]:checkbox").attr("checked", false); 48 } 49 } 50 //将已选项的值连接起来赋值给文本框和隐藏域 51 onchangeCheckState($this,setting); 52 }); 53 //阻止span及其子元素的单击事件传播到document 54 $("#"+spanId).bind('click',function(e){ 55 e.stopPropagation();//阻断事件传播 56 }); 57 //单击document时，隐藏所有悬浮框 58 $(document).bind('click',function(){ 59 $("span[id$=_span]").hide(); 60 }); 61 }) 62 }; 63 //添加悬浮框及隐藏域 64 function loadJson(obj,setting,zData){ 65 var hasHidden = setting.hasHidden; 66 var objId = obj.attr("id"); 67 var spanId = objId+"_span"; 68 //--------------------拼接悬浮框span----------------------------------------------------------- 69 var spanAdd = '<span id="'+spanId+'">'; 70 if(setting.hasAllChecked){ 71 //添加全选选项 72 spanAdd += '<div cellpadding="0" cellspacing="0" style="100%;border-style: none none solid none;border-color:gray;border-1px;"><input type="checkbox" id="'+objId + '_all' +'" class="'+objId+'" value=""/>'; 73 spanAdd += '<label for="' + objId + '_all' + '">全选</label></div>'; 74 } 75 for(var item in zData){ 76 //多选框id，有隐藏域时，为文本框id+_+json对象的属性名，没有隐藏域时，为文本框id+_+json对象的属性值 77 var checkboxId = (hasHidden) ? (objId + '_' + item) : (objId + '_' + zData[item]); 78 //多选框的value，根据hasHidden设置为属性名或属性值 79 var checkboxValue = (hasHidden) ? item : zData[item]; 80 //添加各选项 81 spanAdd += '<input type="checkbox" id="'+checkboxId+'" class="'+objId+'" value="'+checkboxValue+'"/>'; 82 spanAdd += '<label for="'+checkboxId+'">'+zData[item]+'</label><br>'; 83 } 84 spanAdd += '</span>'; 85 //--------------------拼接span结束----------------------------------------------------------- 86 //添加悬浮框 87 obj.after($(spanAdd)); 88 //为悬浮框添加class设置样式，并隐藏，同时添加mouseover和mouseout事件 89 $("#"+spanId).addClass("spanFloater").hide().hover( 90 function(){ $(this).show(); }, 91 function(){ $(this).hide(); } 92 ); 93 //添加隐藏域 94 if(hasHidden){ 95 var hiddenId = objId+"_value";//添加_value后缀做为隐藏域的id 96 var hiddenAdd = '<input type="hidden" id="'+hiddenId+'" name="'+setting.hiddenName+'">'; 97 obj.before($(hiddenAdd)); 98 } 99 }; 100 //单击复选框事件，为文本框和隐藏域赋值 101 function onchangeCheckState(obj,setting){ 102 var objId = obj.attr("id"); 103 var hiddenId = objId+"_value"; 104 var kArr = new Array(); 105 var vArr = new Array(); 106 //获取已选项的值，赋值给数组 107 $("input[class=" + objId + "][value!='']:checked").each(function (index) { 108 kArr[index] = this.value; 109 vArr[index] = $(this).next().text(); 110 }); 111 //串联数组，赋值给文本框和隐藏域 112 if(setting.hasHidden){ 113 $("#"+hiddenId).val(kArr.join(setting.valueSeparator)); 114 } 115 obj.val(vArr.join(setting.textSeparator)); 116 } 117 })(jQuery); 118 $(document).ready(function () { 119 var setting = {json:true,hasHidden:true,hiddenName:"dict_dim_Level",textSeparator:",",valueSeparator:"-"} 120 var data = {nanjing:"南京",shanghai:"上海",yangzhou:"扬州",suzhou:"苏州",wuxi:"无锡",changzhou:"常州",yancheng:"盐城",xuzhou:"徐州",taizhou:"泰州",huaian:"淮安"}; 121 $("input").zMultiSelect(setting,data).attr("readonly","readonly"); 122 }); 123 //--> 124 </script> 125 <style type="text/css"> 126 .spanFloater{display:block;width:inherit;position: absolute; z-index:10;background:#F0F6E4;border: 1px solid #617775;} 127 #dim_Level {width:150px} 128 #dim_Level+span {width:155px} 129 #dim_Level2 {width:150px} 130 #dim_Level2+span {width:155px;background:lightgreen;border: 1px solid #617775;font-family: 方正舒体;font-size:25px;} 131 </style> 132 </head> 133 <body> 134 <table> 135 <tr> 136 <td>已覆盖城市：</td> 137 <td><div><input type="text" id="dim_Level"></div></td> 138 <td>欲拓展城市：</td> 139 <td><div><input type="text" id="dim_Level2"></div></td> 140 </tr> 141 </table> 142 </body> 143 </html>
第一次写jquery插件，有很多粗陋的地方，希望路过的朋友能够指点一二
注：easy ui 中已经有了这样的下拉多选框