DOM练习3二级联动菜单(选择省份城市)

1、html

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2 <html>
  3   <head>
  4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5   </head>
  6   <body>
  7     <select id="provinceID">
  8         <option>选择省份</option>    
  9         <option>吉林省</option>    
 10         <option>辽宁省</option>    
 11         <option>山东省</option>    
 12     </select>
 13     <select id="cityID">
 14         <option>选择城市</option>    
 15     </select>
 16     <script type="text/javascript">
 17         
 18 //          1、定位省份，将当前选中的文本信息取出来
 19         var provinceElement = document.getElementById("provinceID");
 20         
 21 //        2、添加内容改变事件-onchange    
 22         provinceElement.onchange = function(){
 23             
 24 //            6、清空上次选中留下来的city信息
 25 //            清空原城市下拉框中的内容
 26             var cityElement = document.getElementById("cityID");
 27             var  cityElementArray = cityElement.options;
 28             var size = cityElementArray.length;
 29             for(var i=1;i<size;i++){
 30                 //cityElement.removeChild(cityElementArray[i]);
 31                 /*
 32                  * 上面这句是不正确的，如果从前移除后面的，因为移除一个元素后，后面的元素会顶上去
 33                  * 导致删除不干净。
 34                  */
 35                 cityElement.removeChild(cityElementArray[1]);//从1开始删除，保留选择城市这项
 36             }
 37             /*或者
 38              * for(var i=size-1;i>0;i--){
 39                     citySelectElement.removeChild(cityElementArray[i]);
 40                 }
 41              */
 42 //            3、取得用户选中时的省份信息
 43 //            定位用户选择的选项
 44             var optionElement = this[this.selectedIndex];
 45 //            取出选中的文本信息
 46             var option = optionElement.firstChild.nodeValue;
 47 //            alert(option);//用户选中的省份
 48 
 49 //            4、加载xml文件，将用户选中的省份和xml文件的的省份进行比较，然后将对应的省份取出来
 50 //            加载xml文件
 51             var xmlDocument = loadXML();
 52 //            去xml文件中查找<province>标签的集合
 53             var provinceElementArray = xmlDocument.getElementsByTagName("province");
 54             var size = provinceElementArray.length;
 55 //            alert(size);//3个省份
 56             var provinceElement = null;//记住选中的省份
 57 //            循环迭代
 58             for(var i=0;i<size;i++){
 59                 //alert(provinceElementArray[i].nodeName);
 60                 //alert(provinceElementArray[i].getAttribute("name"));//将每个省份的name属性值读取出来了
 61                 if(provinceElementArray[i].getAttribute("name")==option){
 62                     //alert(option);
 63                     provinceElement = provinceElementArray[i];
 64                     break;
 65                 }
 66             }
 67 //            5、将取出来的省份，到xml中将其下面的城市取出来，然后创建文本节点，option节点，加入到cityID中去
 68             if(provinceElement!=null){
 69 //                取得该<province>下对应的所有<city>子标签
 70                 var cityElementArray = provinceElement.getElementsByTagName("city");
 71                 var citySize = cityElementArray.length;
 72                 //alert(citySize);//某一个省份下面的city个数
 73                 for(var i=0;i<citySize;i++){
 74                     
 75 //                    取得<city>标签的内容
 76                     var city = cityElementArray[i].firstChild.nodeValue;
 77                     //alert(city);//具体的某一个城市
 78 //                    创建option对象
 79                     var optionEle = document.createElement("option");
 80 //                    创建文本对象
 81                     var textElement = document.createTextNode(city);
 82 //                    将文本加入到option中去
 83                     optionEle.appendChild(textElement);
 84 //                    将新创建的option添加到cityID中去
 85                     document.getElementById("cityID").appendChild(optionEle);//此时前面添加的还会出现
 86                 }
 87             }
 88             
 89         }
 90       </script>
 91     <script type="text/javascript">
 92         //二级菜单联动
 93         //加载xml文件
 94         function loadXML(){
 95             try {
 96 //                IE
 97                 xmlDoc = new ActiveXObject("microsoft.xmlDOM");
 98             } catch (e) {
 99 //                非IE
100                 try{
101                     xmlDoc = document.implementation.createDocument("","",null);
102                 }catch(e){
103                     alert(e.message);
104                     return;
105                 }
106             }
107             
108             xmlDoc.async = false;
109             xmlDoc.load("cities.xml");
110             return xmlDoc;
111         }
112             //异步加载关闭，即同步操作
113             //请求->响应->请求->响应(同步)
114             //请求->请求->请求->响应->响应->响应(异步)
115     </script>
116   </body>
117 </html>

2、xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <china>
 3     <province name="吉林省">
 4         <city>长春[吉林省]</city>
 5         <city>吉林市[吉林省]</city>
 6         <city>松原[吉林省]</city>
 7         <city>通化[吉林省]</city>
 8     </province>
 9     <province name="辽宁省">
10         <city>沈阳[辽宁省]</city>
11         <city>大连[辽宁省]</city>
12         <city>鞍山[辽宁省]</city>
13         <city>抚顺[辽宁省]</city>
14         <city>铁岭[辽宁省]</city>
15     </province>
16     <province name="山东省">
17         <city>济南[山东省]</city>
18         <city>青岛[山东省]</city>
19         <city>威海[山东省]</city>
20     </province>
21 </china>

二、Ajax版

1、jsp

 1 <%@ page language="java" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4   <head>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6   </head>
 7   <body>
 8     <select id="provinceID">
 9         <option>选择省份</option>    
10         <option>吉林省</option>    
11         <option>辽宁省</option>    
12         <option>山东省</option>    
13     </select>
14     <select id="cityID">
15         <option>选择城市</option>    
16     </select>
17     <script type="text/javascript">
18 
19         
20         //1、添加事件改变事件
21         document.getElementById("provinceID").onchange = function(){
22 
23             //去掉重复
24             var cityElement1 = document.getElementById("cityID");
25             var cityElementArray = cityElement1.options;
26             var size = cityElementArray.length;
27             for(var i=1;i<size;i++){
28                 cityElement1.removeChild(cityElementArray[1]);
29             }
30             //alert("改变了");
31             //取得改变的文本
32             var optionElement = this[this.selectedIndex];
33             var province = optionElement.firstChild.nodeValue;
34             //alert(option);
35             //2、创建XHR对象
36             var xhr = createXHR();
37             //事件监听
38             xhr.onreadystatechange = function(){
39                 if(xhr.readyState==4){
40                     //alert(4);
41                     if(xhr.status==200){
42                         //alert(200);
43                         var docXML =  xhr.responseXML;
44                         //alert(docXML);
45                         var cityElementArray = docXML.getElementsByTagName("city");
46                         var size = cityElementArray.length;
47                         //alert(size);
48                         //获取jsp的city和创建option节点
49                         var cityElement = document.getElementById("cityID");
50                         
51                         for ( var int = 0; int < size; int++) {
52                         var optionElement =  document.createElement("option");
53                             optionElement.innerHTML = cityElementArray[int].innerHTML;
54                             //alert(cityElementArray[int].innerHTML);
55                             cityElement.appendChild(optionElement);
56                         }
57                     }
58                 }
59             };
60             //3、发送
61             xhr.open("get","/myday31/CityServlet?province="+province+"&time="+new Date().toString(),true);
62             xhr.send(null);
63         };
64         
65         //创建XHR对象的方法
66         function createXHR(){
67             var xhr = null;
68             try{
69                 //ie
70                 xhr = new ActiveXObject("microsoft.xmlhttp");
71             }catch(e){
72                 //非ie
73                 xhr = new XMLHttpRequest();
74             }
75             return xhr;
76         }
77     </script>
78   </body>
79 </html>

2、Servlet

 1 import java.io.IOException;
 2 import java.io.PrintWriter;
 3 
 4 import javax.servlet.ServletException;
 5 import javax.servlet.http.HttpServlet;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8 
 9 public class CityServlet extends HttpServlet {
10 
11     public void doGet(HttpServletRequest request,
12             HttpServletResponse response) throws ServletException,IOException {
13         
14         String province = request.getParameter("province");
15         byte[] buf = province.getBytes("ISO8859-1");
16         province = new String(buf,"utf-8");
17         response.setContentType("text/xml;charset=utf-8");
18         System.out.println(province);
19         PrintWriter pw = response.getWriter();
20         pw.write("<root>");
21         if(province.equals("吉林省")){
22             pw.write("<city>长春[吉林省]</city>");
23             pw.write("<city>吉林市[吉林省]</city>");
24             pw.write("<city>松原[吉林省]</city>");
25             pw.write("<city>通化[吉林省]</city>");
26         }else if(province.equals("辽宁省")){
27             pw.write("<city>沈阳[辽宁省]</city>");
28             pw.write("<city>大连[辽宁省]</city>");
29             pw.write("<city>鞍山[辽宁省]</city>");
30             pw.write("<city>抚顺[辽宁省]</city>");
31             pw.write("<city>铁岭[辽宁省]</city>");
32         }else if(province.equals("山东省")){
33             pw.write("<city>济南[山东省]</city>");
34             pw.write("<city>青岛[山东省]</city>");
35             pw.write("<city>威海[山东省]</city>");
36         }
37         pw.write("</root>");
38     }
39 
40 }