快捷搜索:

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();

}

点我下载XML数据源

您可能还会对下面的文章感兴趣: