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 }