Javascript结合XML省市级联
Javascript：
var xmlDoc;
var province = new Array();//省份
var city = new Array();//市
var county = new Array();//县
//初始化省、市、区、县
function Init() {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("Area.xml");
if (xmlDoc.parseError.errorCode != 0) {
alert("出错！" + xmlDoc.parseError.reason);
}
var bb = xmlDoc.selectSingleNode("address").childNodes;
var dd = xmlDoc.selectSingleNode('//address/province[@name="北京市"]');
var ff = xmlDoc.selectSingleNode('//address/province/city[@name="北京辖区"]');
for (var j = 0, l1 = dd.childNodes.length; j < l1; j++) {
var ee = dd.childNodes[j].getAttribute("name")
city.push(ee);
}
for (var k = 0, l2 = ff.childNodes.length; k < l2; k++) {
var gg = ff.childNodes[k].getAttribute("name")
county.push(gg);
}
if (bb.length > 0) {
for (var i = 0; i < bb.length; i++) {
var aa = bb[i].getAttribute("name");
province.push(aa);
}
}
InitSelect("Select1", province);
InitSelect("Select2", city);
InitSelect("Select3", county);
}
//通过省名查询城市、区、县
function selectProvince(name) {
var dd = xmlDoc.selectSingleNode('//address/province [@name="' + name + '"]');
if (dd != null) {
if (dd.childNodes.length > 0) {
city = new Array();
county = new Array();
if (dd.childNodes.length > 0) {
for (var i = 0; i < dd.childNodes.length; i++) {
var ee = dd.childNodes[i].getAttribute("name");
city.push(ee);
}
InitSelect("Select2", city);
}
if (dd.childNodes[0].childNodes.length > 0) {
for (var i = 0; i < dd.childNodes[0].childNodes.length; i++) {
var ff = dd.childNodes[0].childNodes[i].getAttribute("name");
county.push(ff);
}
InitSelect("Select3", county);
}
}
}
}
//得到所有的区或县
function selectCity(name) {
var ff = xmlDoc.selectSingleNode('//address/province/city[@name="' + name + '"]');
if (ff != null) {
if (ff.childNodes.length > 0) {
county = new Array();
for (var i = 0; i < ff.childNodes.length; i++) {
var gg = ff.childNodes[i].getAttribute("name");
county.push(gg);
}
}
InitSelect("Select3", county);
}
}
function InitSelect(id, arrys) {
var item;
var obj = document.getElementById(id);
obj.length = 0;
for (var m = 0; m < arrys.length; m++) {
item = document.createElement("option");
item.text = arrys[m];
item.value = arrys[m];
obj.options.add(item);
}
}
//得到所有的省份
function GetProvinces() {
var provinces = new Array();
var bb = xmlDoc.selectSingleNode("address").childNodes;
if (bb.length > 0) {
for (var i = 0; i < bb.length; i++) {
var aa = bb[i].getAttribute("name");
provinces.push(aa);
}
}
return provinces;
}
//得到所有城市
function GetCitys(p) {
var citys = new Array();
var dd = xmlDoc.selectSingleNode('//address/province [@name="' + p + '"]');
if (dd != null) {
if (dd.childNodes.length > 0) {
for (var i = 0; i < dd.childNodes.length; i++) {
var gg = dd.childNodes[i].getAttribute("name");
citys.push(gg);
}
}
}
return citys;
}
HTML：
<select id="Select1" name="D1" onchange="selectProvince(this[this.selectedIndex].value)">
<option></option>
</select><select id="Select2" name="D2" onchange="selectCity(this[this.selectedIndex].value)">
<option></option>
</select><select id="Select3" name="D3">
<option></option>
</select>
调用：
window.onload = function() {
Init();
}