首先用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
}
摘自 水月清風