多选下拉列表

来源：互联网发布：华为数据库开发工程师编辑：程序博客网时间：2024/05/17 02:54

效果图

1.如何引用插件

2.部分js代码

<span style="font-size:14px;color:#009900;"><strong>(function(){$.fn.extend({MultiChoiceSelect:function(data,selectedData){var main=null;main=$("#multiChoiceSelect");var top=main.offset().top;var left=main.offset().left;var wid=main.width();var hei=main.height(); var dropdown = $("<div name='dropdown' id='dropdown' calss='dropdown'></div>").css({"width" : +wid+1+ "px","height" : "120px","border" : "1px solid #ccc","position" : "absolute","display":"none","left" : +left + "px","top" : +top + hei+3+ "px","z-index" : "10000","background-color":"#F0F8FF","overflow":"auto"}).appendTo($("body"));dropdown.append("<input type='hidden' name='allKey' id='allKey' />");dropdown.append('<ul class="multdroplist_ul"><li><input type="checkbox" class="selectAll" value="" /><span>全部</span></li></ul>');var $ul = dropdown.find("ul");//加载数据var  datalist=data.split("|");var jsonData;for(var i=0;i<datalist.length;i++){jsonData=eval("("+datalist[i]+")");$ul.append('<li><input type="checkbox" value="' + jsonData.key + '" /><span>' + jsonData.value + '</span></li>');}main.click(function(e){$(".dropdown").hide();dropdown.toggle();                e.stopPropagation();});$(document).click(function () {dropdown.hide();            });$(dropdown).filter("*").click(function (e) {                e.stopPropagation();            });//加载已选项if(selectedData.length>0){var selected=selectedData.split(",");$.each(selected,function(index){$("input[value='"+selected[index]+"']",$ul).attr("checked",true); var vArr = new Array();                     $("input[class!='selectAll']:checked", $ul).each(function (index) {                         vArr[index] = $(this).next().text();                     });                     main.val(vArr.join(","));})}//全选或全不选$(".selectAll").click(function(){if($(this).attr("checked")){$("input[class!='selectAll']",$ul).attr("checked",true);}else{$("input[class!='selectAll']",$ul).attr("checked",false);}})//点击复选框时，获取值放到文本框和隐藏标签中;$("input",$ul).click(function(){var kArr = new Array();                var vArr = new Array();                $("input[class!='selectAll']:checked",$ul).each(function(index){                kArr[index] = $(this).val();                    vArr[index] = $(this).next().text();                })                $("#allKey").val(kArr.join(","));                main.val(vArr.join(","));});}});})(jQuery);

3.css代码

.dropdown{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; }.multdroplist_ul {list-style: none outside none;padding:2px;font-size:13px;}.multdroplist_ul li{padding-left: 5px;padding-top: 2px;padding-bottom: 2px;}.multdroplist_ul li:hover{background-color:#FFEBCD;border:1px solid #FF8C00;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;   }.multdroplist_ul li span{margin-left:10px;}

0 0