当前位置: 代码迷 >> Web前端 >> 将现阶段列表<select>中选中的值<option>移动到目标列表
  详细解决方案

将现阶段列表<select>中选中的值<option>移动到目标列表

热度:634   发布时间:2012-11-23 00:03:29.0
将当前列表<select>中选中的值<option>移动到目标列表

ajax公共文件 ajax.js

?

?

/***************************************************
?将当前列表<select>中选中的值<option>移动到目标列表
?@param selfId 当前列表id<Select id="xxx">
?@param targetId 目标列表的id
?@author wangw?
?@version 1.0
?2006-05-10
****************************************************/
function moveElement(selfId,targetId){
????? var self=document.getElementById(selfId);//根据id得到当前列表(select)对象
????? var selfOptions=self.childNodes;//得到当前列表的option对象
????? var target=document.getElementById(targetId);//根据id得到目标列表select对象
????? var selfOption=null;
????? for(var i=0;i<selfOptions.length;i++){
????????? selfOption=selfOptions[i];//得到第i个option对象
????????? if(selfOption.selected){//判断是否被选中
????????????? self.removeChild(self.childNodes[i--]);//将当前列表中的被选中元素移除,并把计数器减一,因为移除一个元素后其他元素的索引会发生变化
????????????? var option=document.createElement("option");//创建一个新的option对象
????????????? option.setAttribute("value",selfOption.value);//设置option对象的value属性
????????????? option.appendChild(document.createTextNode(selfOption.text));//设置option的显示信息
????????????? target.appendChild(option);//将option对象插入如目标列表
????????? }
????? }
}
/***************************************************
显示进度条
@param 提示信息
***************************************************/
function showProcessBar(msg){
?var str_div = '<div align="center" id="ProcessBar" style="position:absolute; visibility:hidden; left:400; top:300; width:150; height:100; z-index:1000;">';
?str_div += '<table border="0" width="300" height="100" cellspacing="1" cellpadding="0" class="ReportTable">';
?str_div += '<tr class="TableContent">';
?str_div += '<td align="center">'+msg+'<br>';
?str_div += '<img src="../images/process_bar2.gif" border="0">';
?str_div += '</td>';
?str_div += '</tr>';
?str_div += '</table>';
?str_div += '</div>';

?document.write(str_div);
}
/***************************************************
?Ajax应用
?@author wangw??
?@version 1.0
?2006-05-10
****************************************************/
? var xmlHttp;
? var handleResponse;
? /**
??? 根据不同浏览器创建xmlHttp对象
? */
? function createXMLHttpRequest(){
??? if(window.ActiveXObject){//ie浏览器
??? xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
?}else if(window.XMLHttpRequest){//其他浏览器
?? xmlHttp=new XMLHttpRequest();
?}
? }
?
?
? /**
??? 向指定的url发送请求
??? 并指定处理服务器请求的方法
??? 一般情况下,服务器返回一个xml
??? @param url 处理请求的服务器端程序(servlet、action。。。)
??? @param handle 处理服务器请求的方法名

? */
? function sendRequest(url,handle,postStr){
???? handleResponse=handle;
???? createXMLHttpRequest();
? xmlHttp.onreadystatechange=handleStateChance;
? if(postStr==null||postStr==""){
???? xmlHttp.open("GET",url,"false");
???? xmlHttp.send(null);
? }else{
???? xmlHttp.open("POST",url,"true");
???? xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
???? xmlHttp.send(postStr);
? }
? }
?
?? function sendRequestByType(url,handle,postStr,isAynchronous){
???? handleResponse=handle;
???? createXMLHttpRequest();
? xmlHttp.onreadystatechange=handleStateChance;
? if(postStr==null||postStr==""){
???? xmlHttp.open("GET",url,isAynchronous);
???? xmlHttp.send(null);
? }else{
???? xmlHttp.open("POST",url,isAynchronous);
???? xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
???? xmlHttp.send(postStr);
? }
? }
?
? function handleStateChance(){
??? if(xmlHttp.readyState==4){
? if(xmlHttp.status==200){
??????? handleResponse();
??? }
?}
? }
? /*************************************************/

?

在页面中使用

<script language="javascript" src="hr/js/helper.js" type=""></script>


function change(){
?var type = document.getElementById("accountDetailVO.type").value;
?var url = "accountDetailAddAction.do?operate=checkType&type="+type;
?sendRequest(url,updateList);//向服务器发送请求,并用处理服务器请求的函数指针作为参数?
}
//
function updateList(){
?var results = xmlHttp.responseXML.getElementsByTagName("select");??
?var metadatas = accountDetailForm("accountDetailVO.item");?//目标对象
?while(metadatas.childNodes.length>0){
??metadatas.removeChild(metadatas.childNodes[0]);
?}
?var option = null;
?option = document.createElement("option");
?option.setAttribute("value","");
?option.appendChild(document.createTextNode("请选择"));????????
?metadatas.appendChild(option);
?for(var i=0;i<results.length;i++){
????? option = document.createElement("option");
????? option.setAttribute("value",results[i].firstChild.text);
????? option.appendChild(document.createTextNode(results[i].lastChild.text));????????
????? metadatas.appendChild(option);
?}
}

?

在java类中互动

?String type = request.getParameter("type");
???try {
????StringBuffer results = new StringBuffer("<metadata>");
????AllowanceType allowanceType = typeLogic.getAllowanceTypeByType(type);?
????List typeList = typeLogic.getAllowTypeChildList(allowanceType.getCode());?
????for (Iterator iterator = typeList.iterator(); iterator.hasNext();) {
?????AllowanceType alloType = (AllowanceType)iterator.next();
?????results.append("<select>");
?????results.append("<key>");
?????results.append(alloType.getType());
?????results.append("</key>");
?????results.append("<value>");
?????results.append(alloType.getTypeName());
?????results.append("</value>");
?????results.append("</select>");
????}
????results.append("</metadata>");
????response.setContentType("text/xml;charset=UTF-8");
????request.setCharacterEncoding("GBK");
????response.getWriter().write(results.toString());
???} catch (Exception e) {
????log.error(e);
???}
???return null;

  相关解决方案