动态更新下拉列表
场景需求，在选择省之后出现选择的地级市名字
- 在之前的教程交了怎么用server配置启动
- 打开eclipse新建一个dynamic web projec，文件目录如下
首先看下index.html，遇到的所有问题都出现js里面。页面拥有连个下拉列表，表1为省选择，表2 为城市选择。当表1选中时，调用updateSelect函数，更新表2的option。值得注意的时DOM的结构，在取得结果时，发现如是
option.text=result[i].childNodes[0].childNodes[0].nodeValue; option.value=result[i].childNodes[1].childNodes[0].nodeValue;得到的的时undefined类型，为什么呢？因为childNodes指所有子节点（包括文本节点和元素节点）当年你的xml文件里面有空白字符时就会被认作是文本节点，空文本节点的子节点就是undefined，所以无法取到他的值，删掉一个.childNodes[0]可以在文件中发现生成了很多空白节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态更新下拉列表</title>
</head>
<script type="text/javascript">
var xmlHttp;
function creatXMLHttpRequest()
{
if(window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
else if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}
}
function updateSelect()
{
var selected=document.all.slt1.value;
creatXMLHttpRequest();
xmlHttp.onreadystatechange=processor;
xmlHttp.open("GET","CreatXML?selected="+selected);
xmlHttp.send(null);
}
function processor()
{
var result;
if(xmlHttp.readyState==4&&xmlHttp.status==200)
{
result=xmlHttp.responseXML.getElementsByTagName("city");
while(document.all.slt2.length>0){ document.all.slt2.removeChild(document.all.slt2.childNodes[0]);}
/*childNodes指所有子节点（包括文本节点和元素节点），当你代码这么写：<select name = "edu" id = "edu"> <option value = "博士">博士~~~</option> <option value = "本科" id="benke">本科~~~</option> //这里select和option之间，option和option之间有空白，这段空白就是文本节点；childNodes[0]指得是中间那段空白（文本节点）,nodeName是#text；childNodes[1]为“博士”，nodeName是OPTION；childNodes[2]为空白，nodeName是#text；以此类推；可以用children（只获取元素节点）来代替childNodes*/
for(var i=0;i<result.length;++i)
{
var option=document.createElement(‘option‘);
option.text=result[i].children[0].childNodes[0].nodeValue;
option.value=result[i].children[1].childNodes[0].nodeValue;
document.all.slt2.options.add(option,null);
}
}
}
</script>
<body>
<select id="slt1" onChange="updateSelect()">
<option value="1">hunan</option>
<option value="2">guangdong</option>
</select>
<select id="slt2">
<option value="">choose your city</option>
</select>
</body>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<servlet>
<servlet-name>CreatXML</servlet-name>
<servlet-class>CreatXML</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CreatXML</servlet-name>
<url-pattern>/CreatXML</url-pattern>
</servlet-mapping>
</web-app>
java
1 import javax.servlet.*;
2 import javax.servlet.http.*;
3 import java.io.*;
4 public class CreatXML extends HttpServlet {
5 public void init() throws ServletException{}
6 public void destroy() {super.destroy();}
7 public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
8 doPost(request, response);
9 }
10 public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
11 response.setContentType("text/xml");
12 response.setCharacterEncoding("UTF-8");
13 String selected=request.getParameter("selected");
14 PrintWriter out=response.getWriter();
15 out.println("<response>");
16 if(selected.equals("1")) {
17 out.println("<city>");
18 out.println("<cityname>changsha</cityname>");
19 out.println("<cityvalue>1</cityvalue>");
20 out.println("</city>");
21 out.println("<city>");
22 out.println("<cityname>xiangtan</cityname>");
23 out.println("<cityvalue>2</cityvalue>");
24 out.println("</city>");
25 out.println("<city>");
26 out.println("<cityname>zhuzhou</cityname>");
27 out.println("<cityvalue>3</cityvalue>");
28 out.println("</city>");
29 }
30 else {
31 out.println("<city>");
32 out.println("<cityname>guangzhou</cityname>");
33 out.println("<cityvalue>1</cityvalue>");
34 out.println("</city>");
35 out.println("<city>");
36 out.println("<cityname>shenzhen</cityname>");
37 out.println("<cityvalue>2</cityvalue>");
38 out.println("</city>");
39 out.println("<city>");
40 out.println("<cityname>dongwan</cityname>");
41 out.println("<cityvalue>3</cityvalue>");
42 out.println("</city>");
43
44 }
45 out.println("</response>");
46 out.flush();
47 out.close();
48 }
49 }
其实很简单啊
原文地址：https://www.cnblogs.com/cuphoria/p/10518149.html
时间： 2024-11-04 08:41:44