jQuery 对选择列表的操作及异步提交使用的简单性-CSDN博客

本文链接：https://blog.csdn.net/springlin2011/article/details/84199932
效果图:
[img]http://dl.iteye.com/upload/picture/pic/111693/a43a6adc-7fad-38b1-b0ab-94321047e469.png[/img]

<!DOCTYPE html>
<html>
<head>
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.min.js" />
<script type="text/javascript">

$(function(){

//模拟数据
var dataNodes =[      
                  { id:1, pId:0, name:"组一", ename:"Mobile"},      
                  { id:2, pId:0, name:"组二", ename:"Nokia"},      
                  { id:3, pId:0, name:"组三", ename:"C6(Music)"},
                  { id:11, pId:1, name:"XXOX6", phone:"12345671"},      
                  { id:12, pId:1, name:"XXO5230", phone:"12345672"},      
                  { id:13, pId:1, name:"XXON97mini", phone:"12345673"},      
                  { id:21, pId:2, name:"XXO三星", phone:"123456721"},     
                  { id:22, pId:2, name:"XXOI9000", phone:"123456722"},      
                  { id:23, pId:2, name:"XXOI9000", phone:"123456723"},      
                  { id:31, pId:3, name:"XXOGalaxy Naos", phone:"123456731"},      
                  { id:31, pId:3, name:"XXOFascinate", phone:"123456732"},      
                  { id:33, pId:3, name:"XXO索爱", phone:"123456733"}];

//初始化加载组信息      
function initGroupInfomation(param){      
    for(i=0; i < dataNodes.length; i++ ){      
        if(dataNodes[i].pId == "0"){
			//DOM 创建节点      
            //var newoption = document.createElement("option");      
            //newoption.text = dataNodes[i].name;      
            //newoption.value = dataNodes[i].id;   
            $("#"+param).append("<option value="+ dataNodes[i].id +">"+ dataNodes[i].name +"</option>"); 
        }      
    }      
}

//加载数据
function loadData(id){
	var data = "";
	 for(i=0; i < dataNodes.length; i++ ){      
	        if(dataNodes[i].pId == id){      
	           data += "<option value="+ dataNodes[i].phone +">"+ dataNodes[i].name +"</option>";
	        }      
	 } 
  return data;
}
//判断是否存在
function isSelFlag(tag){
	var flag = false;
	$("#contactPerson option").each(function(i){
		if($("#"+tag+" option:selected").val() == this.value){
			flag = true;
		}
	});
	return flag;
}

//组列表
$("#group").click(function(){
	//alert(this.value);
	//alert($("#group option:selected").val());
	if($("#person option").length > 0){
		$("#person option").remove();
	}
	//组不存在选中列表时才加载
	if(!isSelFlag("group")){
		$("#person").append(loadData(this.value));
	}
});
$("#group").dblclick(function(){
	//判断联系人列表中是否存在选中项
	if(!isSelFlag("group")){
		$("#group option:selected").clone().prependTo("#contactPerson");
	}else alert("O(∩_∩)O温馨提示, 选择的列已存在!");

	if($("#person option").length > 0){
		$("#person option").remove();
	}
});

//人员列表
$("#person").dblclick(function(){
	if(!isSelFlag("person")){
		$("#person option:selected").appendTo("#contactPerson");
	}else alert("O(∩_∩)O温馨提示, 选择的列已存在!");

});

//联系人列表
$("#contactPerson").dblclick(function(){
	$("#contactPerson option:selected").remove();
});

//加载组数据
initGroupInfomation("group");


//参数循环获取
$("#save").click(function(){
	var url = 'XXX.action';
	var param = {};
	$("div input,select,textarea").each(function(i){
		param[this.name] = this.value;
	});
	//JSON数据的循环拼接,做异步提交用
	var strbf = '{';
	$("#contactPerson option").each(function(i){
			strbf += this.value+":'"+this.text+"',";
	});
	strbf = strbf.substring(0,strbf.length-1)+ "}";
	param['contactPerson'] = strbf;
	requestAjax(url, param);
});


function requestAjax(url,param){
		$.ajax({
			   type: "POST",  
			   url: url,
			   data: param,
			   success: function(data,textStatus){
        		 alert('操作成功!'+data.message);
			   },
			   error: function(XMLHttpRequest, textStatus, errorThrown){
				alert("产生了异常!");
			   },
			   dataType: "json"
			});
}

});
</script>
</head>
<body>
<div class="fieldset_container">
					<table cellpadding="0" cellspacing="0" class="table_form" align="center">
						<tr>
							<td width="280px">
										<a id="bNPage" href="#">组列表</a>
							</td>
							<td width="6px" rowspan="2"></td>
							<td width="280px">
										<a id="bNPage" href="#">组人员列表</a>
							</td>
							<td width="6px" rowspan="2"></td>
							<td width="280px">
										<a id="bNPage" href="#">已选择人员,组列表</a>
							</td>
						</tr>
						<tr>
							<td align="center">
								<select name="group" id="group" multiple="multiple" style="width:280px; height:150px;"></select>
							</td>
							<td align="center">
								<select name="person" id="person" multiple="multiple" style="width:280px; height:150px;"></select>
							</td>
							<td align="center">
								<select name="contactPerson" id="contactPerson" multiple="multiple" style="width:280px; height:150px;"></select>
							</td>
						</tr>
					</table>

</div>
</body>
</html>