用javascript和Ajax分别写省市级联
首先用javascript来写省市级联：
1 使用数组优化省市级联-根据索引
01
<head>
02
03
<title></title>
04
05
<script type="text/javascript">
06
07
function selectCitys(){
08
var cityArray = new Array();
09
cityArray[0] = ["郑州","新乡","焦作","开封"];
10
cityArray[1] = ["广州","珠海","深圳"];
11
cityArray[2] = ["西安","宝鸡","渭南","汉中"];
12
13
var s = document.getElementById("sheng");
14
if(s.selectedIndex != 0) {
15
//获取选中的省对应数组中的索引
16
var index = s.selectedIndex - 1;
17
18
//清空city中的option
19
document.getElementById("city").options.length = 1;
20
21
for(var i in cityArray[index]) {
22
var city = cityArray[index][i];
23
24
var option = new Option(city,city);
25
document.getElementById("city").options.add(option);
26
}
27
}
28
29
}
30
</script>
31
</head>
2 使用数组优化省市级联-根据值
01
<head>
02
03
<title></title>
04
05
<script type="text/javascript">
06
07
function selectCitys(){
08
var cityArray = new Array();
09
10
11
cityArray['hn'] = ["郑州","新乡","焦作","开封"];
12
cityArray['gd'] = ["广州","珠海","深圳"];
13
cityArray['shx'] = ["西安","宝鸡","渭南","汉中"];
14
15
var s = document.getElementById("sheng").value;
16
17
if(s != "") {
18
//清空city中的option
19
document.getElementById("city").options.length = 1;
20
21
for(var i in cityArray[s]) {
22
var city = cityArray[s][i];
23
24
var option = new Option(city,city);
25
document.getElementById("city").options.add(option);
26
}
27
}
28
29
}
30
</script>
31
</head>
01
<body>
02
03
<select name="" id="sheng" onchange="selectCitys()">
04
<option value="">-- 请选择省 --</option>
05
<option value="hn">河南</option>
06
<option value="gd">广东</option>
07
<option value="shx">陕西</option>
08
</select>
09
<select name="" id="city">
10
<option value="">-- 请选择城市 --</option>
11
</select>
12
</body>
使用ajax来写省市级联
01
<body>
02
03
<select name="" id="sheng" onchange="selectCitys()">
04
<option value="">-- 请选择省 --</option>
05
<option value="hn">河南</option>
06
<option value="gd">广东</option>
07
<option value="shx">陕西</option>
08
</select>
09
<select name="" id="city">
10
<option value="">-- 请选择城市 --</option>
11
</select>
01
<script type="text/javascript">
02
var xmlHttp;
03
04
/*创建XMLHttpRequest对象*/
05
function createXMLHttpRequest() {
06
if(window.ActiveXObject) {
07
//IE
08
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
09
} else {
10
//chrome firefox opera
11
xmlHttp = new XMLHttpRequest();
12
}
13
}
14
15
function sendAjax(){
16
createXMLHttpRequest();
17
18
var name = document.getElementById("sheng").value;
19
xmlHttp.onreadystatechange = callback;//回调函数
20
21
22
xmlHttp.open("GET","sheng.jspx?name="+name,true);
23
xmlHttp.send();
24
25
}
26
27
function callback() {
28
if(xmlHttp.readyState == 4) {
29
if(xmlHttp.status == 200) {
30
var xml = xmlHttp.responseXML;
31
32
var types = xml.getElementsByTagName("recode");
33
document.getElementById("city").options.length = 1;
34
for(var i = 0;i < types.length;i++) {
35
36
//alert(types[i].childNodes[0].nodeValue);
37
var myOption = new Option(types[i].childNodes[0].nodeValue,types[i].childNodes[0].nodeValue);
38
document.getElementById("city").options.add(myOption);
39
40
}
41
42
} else {
43
alert("Ajax Error!");
44
}
45
}
46
}
47
</script>
48
</body>
49
</html>
sheng.jspx
01
package com.kaishengit.web;
02
03
04
import java.io.IOException;
05
import java.io.PrintWriter;
06
import java.util.ArrayList;
07
import java.util.HashMap;
08
import java.util.List;
09
import java.util.Map;
10
11
import javax.servlet.ServletException;
12
import javax.servlet.http.HttpServlet;
13
import javax.servlet.http.HttpServletRequest;
14
import javax.servlet.http.HttpServletResponse;
15
16
public class CarServlet extends HttpServlet {
17
18
private static final long serialVersionUID = 1L;
19
20
@Override
21
protected void service(HttpServletRequest request, HttpServletResponse response)
22
throws ServletException, IOException {
23
24
25
//DB取出数据
26
Map<String, List<String>> data = new HashMap<String, List<String>>();
27
List<String> hnList = new ArrayList<String>();
28
hnList.add("郑州");
29
hnList.add("新乡");
30
hnList.add("焦作");
31
hnList.add("开封");
32
33
34
35
List<String> gdList = new ArrayList<String>();
36
gdList.add("广州");
37
gdList.add("珠海");
38
gdList.add("深圳");
39
40
List<String> shaxList = new ArrayList<String>();
41
shaxList.add("西安");
42
shaxList.add("宝鸡");
43
shaxList.add("渭南");
44
shaxList.add("汉中");
45
46
47
data.put("hn", hnList);
48
data.put("gd", gdList);
49
data.put("shax", shaxList);
50
//----------------------------------------------------------
51
01
String name = request.getParameter("name");
02
03
List<String> dataList = data.get(name);
04
05
06
response.setContentType("text/xml;charset=UTF-8");
07
PrintWriter out = response.getWriter();
08
09
out.print("<?xml version=/"1.0/" encoding=/"UTF-8/"?>");
10
out.print("<data>");
11
for(String str : dataList) {
12
out.print("<recode>"+str+"</recode>");
13
}
14
out.print("</data>");
15
16
out.flush();
17
out.close();
18
19
20
}
21
22
}
摘自 水月清风
