利用ajax和javascript实现地址选择级联。
数据地址：中国省市县数据（XML）
效果：
index.html：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title>选择省市地区</title>
</head>
<body>
<form action="index.html" method="post">
省:
<select name="province" id="myProvinces">
<option>请选择...</option>
</select>
市:
<select name="city" id="myCity">
<option>请选择...</option>
</select>
县:
<select name="district" id="mydistrict">
<option>请选择...</option>
</select>
<br /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
<script src="js/loadXmlDoc.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jilianxuanze.js" type="text/javascript" charset="utf-8"></script>
</html>
loadXmlDoc.js:
//利用ajax同步加载服务器上的文件，返回一个XML的document对象
function loadXMLDoc(dname) {
var xmlhttp;
if(window.XMLHttpRequest) {
// code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",dname,false);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;
return xmlDoc;
}
jilianxuanze.js：
/* * 主要的思想是当页面打开的时候，调用loadXmlDoc利用aja获取省份XML数据，然后解析xml添加省份到控件中 * 当省份变化的时候，首先删除原先市控件中的数据，然后再loadXmlDoc加载市XML数据，然后再解析添加市到控件中， * 后面的县级变化以此类推 */
window.onload = function() {
var xmlDoc_province = loadXMLDoc("data/Provinces.xml");
//alert(xmlDoc != null);
var province = document.getElementById("myProvinces");
var xml_provinces = xmlDoc_province.getElementsByTagName("Province");
for(var i = 0; i < xml_provinces.length; i++) {
var provinceName = xml_provinces[i].firstChild.nodeValue;
var provinceID = xml_provinces[i].getAttribute("id");
var provinceValue = xml_provinces[i].getAttribute("name");
var para = document.createElement("option");
para.setAttribute("value",provinceValue);
para.setAttribute("id",provinceID);
var node = document.createTextNode(provinceName);
para.appendChild(node);
province.appendChild(para);
//alert(provinceName);
}
}
//当province改变时，显示对应的身份，删除之前的城市信息
document.getElementById("myProvinces").onchange = function() {
//获取选中省份
var select_province = document.getElementById("myProvinces");
//选中索引
var select_province_index = select_province.selectedindex;
//选中文本
var select_province_text = select_province.options[select_province_index].text;
//选中值
//var select_province_value = select_province.Option[select_province_index].value;
//alert(select_province_text);
var select_province_id = select_province.options[select_province_index].getAttribute("id");
var xmlDoc_city = loadXMLDoc("data/Cities.xml");
var xml_city = xmlDoc_city.getElementsByClassName(select_province_id);
var city = document.getElementById("myCity");
/* * 删除所有城市子节点和县子节点 */
// var delete_city = city.getElementsByTagName("option");
// for(var i = 0; i < delete_city.length; i++) {
// city.remove(delete_city[i].node);
// }
while(city.hasChildNodes()) {
city.removeChild(city.firstChild);
}
var districe = document.getElementById("mydistrict");
while(districe.hasChildNodes()) {
districe.removeChild(districe.firstChild);
}
var para = document.createElement("option");
var node = document.createTextNode("请选择...");
para.appendChild(node);
city.appendChild(para);
for(var i = 0; i < xml_city.length; i++) {
var cityName = xml_city[i].firstChild.nodeValue;
var cityID = xml_city[i].getAttribute("id");
var cityValue = xml_city[i].getAttribute("name");
var para = document.createElement("option");
var node = document.createTextNode(cityName);
para.setAttribute("value",cityValue);
para.setAttribute("id",cityID);
para.appendChild(node);
city.appendChild(para);
//alert(provinceName);
}
}
//当city改变时，显示县，删除之前的县信息
document.getElementById("myCity").onchange = function() {
//获取选中shi
var select_city = document.getElementById("myCity");
//选中索引
var select_city_index = select_city.selectedindex;
//选中文本
var select_city_text = select_city.options[select_city_index].text;
//选中值
var select_city_id = select_city.options[select_city_index].getAttribute("id");
var xmlDoc_district = loadXMLDoc("data/districts.xml");
var xml_district = xmlDoc_district.getElementsByClassName(select_city_id);
var district = document.getElementById("mydistrict");
/* * 删除所有城市子节点 */
// var delete_city = city.getElementsByTagName("option");
// for(var i = 0; i < delete_city.length; i++) {
// city.remove(delete_city[i].node);
// }
while(district.hasChildNodes()) {
district.removeChild(district.firstChild);
}
var para = document.createElement("option");
var node = document.createTextNode("请选择...");
para.appendChild(node);
district.appendChild(para);
for(var i = 0; i < xml_district.length; i++) {
var districtName = xml_district[i].firstChild.nodeValue;
var districtID = xml_district[i].getAttribute("id");
var districtValue = xml_district[i].getAttribute("name");
var para = document.createElement("option");
var node = document.createTextNode(districtName);
para.setAttribute("value",districtValue);
para.setAttribute("id",districtID);
para.appendChild(node);
district.appendChild(para);
//alert(provinceName);
}
}