多选下拉列表

最新推荐文章于 2024-01-15 18:02:42 发布

梦临城下

最新推荐文章于 2024-01-15 18:02:42 发布

阅读量356

点赞数 1

分类专栏： javascript 文章标签：多选下拉列表

本文链接：https://blog.csdn.net/u011331889/article/details/50675620

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

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;}