jQuery 对选择列表的操作及异步提交使用的简单性
效果图:http://dl.iteye.com/upload/picture/pic/111693/a43a6adc-7fad-38b1-b0ab-94321047e469.png
<!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.pId == "0"){//DOM 创建节点 //var newoption = document.createElement("option"); //newoption.text = dataNodes.name; //newoption.value = dataNodes.id; $("#"+param).append("<option value="+ dataNodes.id +">"+ dataNodes.name +"</option>"); } } }//加载数据function loadData(id){var data = ""; for(i=0; i < dataNodes.length; i++ ){ if(dataNodes.pId == id){ data += "<option value="+ dataNodes.phone +">"+ dataNodes.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.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>
页:
[1]