将当前列表<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;