关于ajax2级下拉框连动的问题

wotiancai · 发表于 2007-2-4 20:24:46

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>MyHtml.html</title>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">

  

  </head>
  <script type="text/javascript">
  function getResult(stateVal) {
               var url = "servlet/SelectCityServlet?state="+stateVal;
               if (window.XMLHttpRequest) {
                              req = new XMLHttpRequest();
               }else if (window.ActiveXObject) {
                              req = new ActiveXObject("Microsoft.XMLHTTP");
               }
               if(req){
                              req.open("GET",url, true);
                              req.onreadystatechange = complete;
                              req.send(null);
               }
  }
  function complete(){
               if (req.readyState == 4) {
                              if (req.status == 200) {
                                                var city = req.responseXML.getElementsByTagName("city");
                                                alert(city.length);
                                                var str=new Array();
                                                for(var i=0;i<city.length;i++){
                                                               str=city.firstChild.data;
                                                }
                                                alert(document.getElementById("city"));
                                                buildSelect(str,document.getElementById("city"));
                              }
               }
  }
  function buildSelect(str,sel) {
               sel.options.length=0;
               for(var i=0;i<str.length;i++) {
                              sel.options[sel.options.length]=new Option(str,str)
               }
  }
  function test(){
               alert("test");
  }
  </script>
  <body>
  不变的静止内容
  <BR />
  <BR />
  <select name="state" onChange="getResult(this.value)">
  <option value="">请选择</option>
  <option value="zj">浙江</option>
  <option value="zs">江苏</option>
  </select>
  <select id="city"></select>
  <BR />
  <BR />
  不用重新刷新
  </body>
  </html>

Servlet代码：

  package com.stephen.servlet;

  import java.io.IOException;
  import java.io.PrintWriter;

  import javax.servlet.ServletException;
  import javax.servlet.http.HttpServlet;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;

  /**
* @author stephen
*
* TODO To change the template for this generated type comment go to Window -
* Preferences - Java - Code Style - Code Templates
*/
  public class SelectCityServlet extends HttpServlet {

  public SelectCityServlet() {
  super();
  }

  public void destroy() {
  super.destroy();
  }

  public void doGet(HttpServletRequest request, HttpServletResponse response)
  throws ServletException, IOException {
  response.setContentType("text/xml");
  response.setCharacterEncoding("UTF-8");
  response.setHeader("Cache-Control", "no-cache");
  String state = request.getParameter("state");
  StringBuffer sb = new StringBuffer("<state>");
  if ("zj".equals(state)) {
  sb.append("<city>杭州</city><city>湖州</city>");
  } else if ("zs".equals(state)) {
  sb.append("<city>南京</city><city>扬州</city><city>苏州</city>");
  }
  sb.append("</state>");
  PrintWriter out = response.getWriter();
  out.write(sb.toString());
  out.close();
  }

  }

web.xml

  <servlet>
  <servlet-name>SelectCityServlet</servlet-name>
  <servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
  </servlet>
  <servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/servlet/SelectCityServlet</url-pattern>
  </servlet-mapping>
不知道哪里有问题.

adamed · 发表于 2007-2-5 09:05:10

for(var i=0;i<city.length;i++){
str=city〔i〕.firstChild.data;
}

这里面原来的 str=city.firstChild.data 改成上面这样就ok了。
注意city后面的 i 两边是中括号。

[ 本帖最后由 adamed 于 2007-2-5 09:26 编辑 ]

adamed · 发表于 2007-2-5 09:27:05

你的代码逻辑上还有一点问题。。servlet部分没问题。主要是城市那个select的动态生成有问题。
for(var i=0;i<city.length;i++){
                                                               str=city〔i〕.firstChild.data;
                                                }
这里面str只能是最后一个城市。 buildSelect(str,document.getElementById("city"));
之后出现的城市都是一样的，只能是最后一个城市。

代码改成这样就ok了
  function complete(){
               if (req.readyState == 4) {
                              if (req.status == 200) {
                                                var city = req.responseXML.getElementsByTagName("city");
                                                alert(city.length);
                                                var str=new Array();
                                                var cityselect=document.getElementById("city");
                                                cityselect.length=1;
                                                for(var i=0;i<city.length;i++){
                                                      str=city〔i〕.firstChild.data;
                                                      cityselect〔i〕=new Option(str,str);

                                                }

                              }
               }
  }

注意那个中括号这里是全角的，代码中要改成英文的中括号

[ 本帖最后由 adamed 于 2007-2-5 10:48 编辑 ]

wotiancai · 发表于 2007-2-5 17:43:49

谢谢了..我回家调试下..还是这里好..有热心人帮忙,呵呵

		自动登录	找回密码
密码			建立账号

[咨询] 关于ajax2级下拉框连动的问题