利用ajax實現省市縣級聯選擇
阿新 • • 發佈：2019-02-11
利用ajax和javascript實現地址選擇級聯。
效果：
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>選擇省市地區</title>
</head>
<body>
<form action="index.html" method="post">
省:
<select 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);
}
}