Ajax实现动态加载组合框的实例代码

2024-09-01 08:27:05

字体：大中小

来源：转载

供稿：网友

一 province.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html>  <head>   <script type="text/javascript" language="javaScript">    var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象    function createXMLHttpRequest() {     if(window.ActiveXObject) { //Internet Explorer时，创建XMLHttpRequest对象的方法      try {      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");     } catch(e) {      try {       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");       //旧版本的Internet Explorer，创建XMLHttpRequest对象      } catch(e) {       window.alert("创建XMLHttpRequest对象错误"+e);      }      }    } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法      xmlHttp = new XMLHttpRequest();     }     if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象      window.alert("创建XMLHttpRequest对象异常！");    }     }   //下拉列表项改变时的操作   function proChange(objVal) {     createXMLHttpRequest(); //创建XMLHttpRequest对象     document.getElementById("city").length = 1;   //根据ID获取指定元素，并赋值     xmlHttp.onreadystatechange = cityList; //指定onreadystatechange处理函数     var url="CityByXMLServlet?province="+objVal; //请求的URL地址     xmlHttp.open("POST",url,true);     xmlHttp.send(null);    }    function cityList() { //onreadystatechange的处理函数    if(xmlHttp.readyState==4) {      if(xmlHttp.status==200) {       parseXML(xmlHttp.responseXML);   //解析服务器返回的XML数据     }     }   }    //解析xml信息，以添加地市    function parseXML(xmlDoc) {    var len = xmlDoc.getElementsByTagName("city");    //获取XML数据中所有的“city”元素对象集合     var _citySel = document.getElementById("city");   //根据ID获取页面中的select元素     for(var i=0;i<len.length;i++) { //遍历XML数据并给select元素添加选项     var opt = document.createElement("OPTION");   //创建option对象     opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data;     //指定新创建元素的text属性值     opt.value = xmlDoc.getElementsByTagName("city")[i].firstChild.data;    //指定新创建元素的value属性值     _citySel.add(opt); //为select元素添加option    }    }   </script>   <title>动态加载组合框</title>  </head>  <body>   <table align="center" border=1 width="320">    <tr>     <td>省份：</td>    <td>     <select id="province" onChange="proChange(this.value);" style="width:85">      <option value="gd">广东</option>       <option value="gx">广西</option>       <option value="hn">湖南</option>      <option value="hb">湖北</option>      <option value="ah">安徽</option>     </select>    </td>    </tr>   <tr>    <td>城市：</td>    <td>     <select id="city" style="width:85">       <option value="">--请选择--</option>     </select>    </td>    </tr>   </table> </body> </html>

上一篇：jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

下一篇：基于CORS实现WebApi Ajax 跨域请求解决方法