类似于开心发信的JS多选组件

<script type="text/javascript">document.domain = &quot;iteye.com&quot;;</script>

效果如图所示，首先是一级菜单，点击后会异步从后台action中加载第二级选项，点击选项后，该选项会被加入到下面得div中，点击被加入到div中的选项后面的X，将删除被选中选项。点击确定按钮保存。

 

首先，页面内容很简单，只有三个存放数据的div和两个隐藏域。

 

<div id ="catalogBox" style="width: 500px;border:1px #DDF solid;">
</div>
<div id ="multipleBox" style="width: 500px;border:1px #DDF solid;background-color: #FFF">
</div>
<div id="resultDiv" style="width: 500px;height:100px;border:1px #DDF solid;background-color: #FFF;">
</div>
<br/>

<input type="hidden" id="multipleBoxTitles"/>
<input type="hidden" id="multipleBoxIds"/>

 catalogBox用于存放一级（分类）菜单。multipleBox用于存放被异步加载进来的选项。resultDiv用来存放选中的项目。 两个隐藏于存放结果。

以下是选择项目和删除项目的方法。

 

//帯删除按钮的标签组件， atomTag方法返回一个字块的字符串，用于在结果框中显示。

 var atomTag=function(id,name){ 

	var tag="<div id='atomDiv"+id+"' style='border:1px solid #DDF;margin:3px;float:left;'><span id='atom"+id+"'  value='"+id+"'>"+name+"</span>&nbsp;<a onclick='delAtom(\""+id+"\")' style='cursor:pointer;'>X</a>&nbsp;</div>"
		return tag;
	}

//删除选中标签方法，和atomTag配合使用，直接从html中删除atomDiv开头的字符串
	function delAtom(id){
		$("#atomDiv"+id).remove();
	}

//选择项目
	function select(obj){
	if($("#resultDiv").text().indexOf($(obj).text())==-1)	
//当还未选当前项时
		$("#resultDiv").append(atomTag($(obj).attr("id"),$(obj).text()))	
//将控件字符串插入
	}

 

 

//保存项目，执行此函数将会自动把选中的项用，隔开，存放到隐藏域中，便于其他操作和带到后台
	function saveMultiple(){
		var multipleBoxTitles="";
		var multipleBoxIds=""
		$("#resultDiv span").each(function (){
			multipleBoxTitles+=(multipleBoxTitles==""?$(this).text():(","+$(this).text()));
			multipleBoxIds+=(multipleBoxIds==""?$(this).attr("value"):(","+$(this).attr("value")));
		});
		$("#multipleBoxTitles").val(multipleBoxTitles);		
//将值传到隐藏域中
		$("#multipleBoxIds").val(multipleBoxIds);
	}

 

以下为加载二级项目方法

 

//加载二级项目用
	function loadChildren(id){
		$.post("<c:url value='/user/activity/multipleControl.ao?method=getAllActivityProject' />",
		{parentId:id},
		function(result){
			var children="";
			result=eval(result);
			for(var i=0;i<result.length;i++){
				children+="<a href='javascript:void(0)' onclick='select(this)' id='a"+result[i]["id"]+"' >"+result[i]["title"]+"</a> &nbsp;";
			}
			$("#multipleBox").html(children);
		});
	}

 初始化 数据，回显数据

 

<script language="JavaScript">
	var jsonArr=eval('${json}');
	var titles="${titles}";
	var optionsSource="";
	var optionsResult="";
	for(var i=0;i<jsonArr.length;i++){
			optionsSource+="<a href='javascript:void(0)' onclick=loadChildren('"+jsonArr[i]["id"]+"')>"+jsonArr[i]["title"]+"</a> &nbsp;";
	}
	if(titles!=""){
	titles=titles.split(",");
		for(var i=0;i<titles.length;i++){
			optionsResult+=	atomTag(i,titles[i]);
		}
	}
	
	$("#catalogBox").html(optionsSource);
	$("#resultDiv").html(optionsResult);

</script>