首先用javascript来写省市级联:
1 使用数组优化省市级联-根据索引
<head>
<title></title>
<script type="text/javascript">
function selectCitys(){
var cityArray = new Array();
cityArray[0] = ["郑州","新乡","焦作","开封"];
cityArray[1] = ["广州","珠海","深圳"];
cityArray[2] = ["西安","宝鸡","渭南","汉中"];
var s = document.getElementById("sheng");
if(s.selectedIndex != 0) {
//获取选中的省对应数组中的索引
var index = s.selectedIndex - 1;
//清空city中的option
document.getElementById("city").options.length = 1;
for(var i in cityArray[index]) {
var city = cityArray[index][i];
var option = new Option(city,city);
document.getElementById("city").options.add(option);
}
}
}
</script>
</head>
2 使用数组优化省市级联-根据值
<head>
<title></title>
<script type="text/javascript">
function selectCitys(){
var cityArray = new Array();
cityArray['hn'] = ["郑州","新乡","焦作","开封"];
cityArray['gd'] = ["广州","珠海","深圳"];
cityArray['shx'] = ["西安","宝鸡","渭南","汉中"];
var s = document.getElementById("sheng").value;
if(s != "") {
//清空city中的option
document.getElementById("city").options.length = 1;
for(var i in cityArray[s]) {
var city = cityArray[s][i];
var option = new Option(city,city);
document.getElementById("city").options.add(option);
}
}
}
</script>
</head>
<body>
<select name="" id="sheng" onchange="selectCitys()">
<option value="">-- 请选择省 --</option>
<option value="hn">河南</option>
<option value="gd">广东</option>
<option value="shx">陕西</option>
</select>
<select name="" id="city">
<option value="">-- 请选择城市 --</option>
</select>
</body>
使用ajax来写省市级联
<body>
<select name="" id="sheng" onchange="selectCitys()">
<option value="">-- 请选择省 --</option>
<option value="hn">河南</option>
<option value="gd">广东</option>
<option value="shx">陕西</option>
</select>
<select name="" id="city">
<option value="">-- 请选择城市 --</option>
</select>
<script type="text/javascript">
var xmlHttp;
/*创建XMLHttpRequest对象*/
function createXMLHttpRequest() {
if(window.ActiveXObject) {
//IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//chrome firefox opera
xmlHttp = new XMLHttpRequest();
}
}
function sendAjax(){
createXMLHttpRequest();
var name = document.getElementById("sheng").value;
xmlHttp.onreadystatechange = callback;//回调函数
xmlHttp.open("GET","sheng.jspx?name="+name,true);
xmlHttp.send();
}
function callback() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var xml = xmlHttp.responseXML;
var types = xml.getElementsByTagName("recode");
document.getElementById("city").options.length = 1;
for(var i = 0;i < types.length;i++) {
//alert(types[i].childNodes[0].nodeValue);
var myOption = new Option(types[i].childNodes[0].nodeValue,types[i].childNodes[0].nodeValue);
document.getElementById("city").options.add(myOption);
}
} else {
alert("Ajax Error!");
}
}
}
</script>
</body>
</html>
sheng.jspx
package com.kaishengit.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CarServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//DB取出数据
Map<String, List<String>> data = new HashMap<String, List<String>>();
List<String> hnList = new ArrayList<String>();
hnList.add("郑州");
hnList.add("新乡");
hnList.add("焦作");
hnList.add("开封");
List<String> gdList = new ArrayList<String>();
gdList.add("广州");
gdList.add("珠海");
gdList.add("深圳");
List<String> shaxList = new ArrayList<String>();
shaxList.add("西安");
shaxList.add("宝鸡");
shaxList.add("渭南");
shaxList.add("汉中");
data.put("hn", hnList);
data.put("gd", gdList);
data.put("shax", shaxList);
//----------------------------------------------------------
String name = request.getParameter("name");
List<String> dataList = data.get(name);
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.print("<data>");
for(String str : dataList) {
out.print("<recode>"+str+"</recode>");
}
out.print("</data>");
out.flush();
out.close();
}
}