达维营-前端网有许多时候我们需要用到二级联动，至于更多级的不在这儿讨论了。
首先们们建立两个文件city.html和cities.xml直接上带码，拷贝即可用：
1）city.html的文件代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级省市关联</title>
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
<option value="吉林省">吉林省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
<script>
var provinceNode = document.getElementById('province');
provinceNode.onchange = function () {
//1、获取页面中选中的省份名称
var provinceValue = provinceNode.value;
//2、解析XML
var docXml = parseXML("cities.xml");
//3、遍历xml中的省份
var provinceXmlElements = docXml.getElementsByTagName("province");
//清空
var cityElements = document.getElementById("city");
var optionsOld = cityElements.getElementsByTagName("option");
for (var z = optionsOld.length - 1; z > 0; z--) {
cityElements.removeChild(optionsOld[z]);
}
for (var i = 0; i < provinceXmlElements.length; i++) {
var provinceXmlElement = provinceXmlElements[i];
var provinceXmlValue = provinceXmlElement.getAttribute("name");
//4、判断页面中的省份与xml文件中的省份是否一致
if (provinceValue == provinceXmlValue) {
//5、若一致，则遍历该省份对应的所有城市信息
var cityXmlElements = provinceXmlElement.getElementsByTagName("city");
for (var j = 0; j < cityXmlElements.length; j++) {
var cityXmlElement = cityXmlElements[j];
var cityXmlValue = cityXmlElement.firstChild.nodeValue;
//6、插入到页面下拉选项中
var optionElement = document.createElement("option");
optionElement.setAttribute("value", cityXmlValue);
var cityText = document.createTextNode(cityXmlValue);
optionElement.appendChild(cityText);
cityElements.appendChild(optionElement);
}
}
}
}
/**
* 跨浏览器解析xml
* @param ｛Object｝
* @returns {fileXmlName}
*/
function parseXML(file) {
var xmlDoc = null;
try {//Internet Explorer 创建一个空的xml文档
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;//设置加载XML方式，关闭异步加载xml,使用同步方式加载XML文档
xmlDoc.load(file); //加载xml文件
}
catch (e) {
try {//Firefox, Mozilla, Opera, 创建一个空的xml文档
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.async = false;//设置加载XML方式，关闭异步加载xml,使用同步方式加载XML文档
xmlDoc.load(file); //加载xml文件
}
catch (e) {
try {//Google Chrome
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("get", file, false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
} catch (e) {
alert("您的浏览器不能正常加载文件。请切换到兼容模式，或者更换浏览器");
return; //如果创建不成功，就直接返回，不往下走。
}
}
}
return xmlDoc;
}
</script>
</body>
</html>
2）cities.xml文件的内容如下：
<?xml version="1.0" encoding="UTF-8"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通化</city> </province> <province name="辽宁省"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>铁岭</city> </province> <province name="山东省"> <city>济南</city> <city>青岛</city> <city>威海</city> <city>烟台</city> <city>潍坊</city> </province> </china>
此实例完美解决了xml在chrome上的加载问题。
3、以下是Ajax版，调用cities.xml文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
<option value="铁岭">铁岭</option>
</select>
</body>
<script language="JavaScript">
$.get("cities.xml", function (xml) {
var docXml = xml;
var $provinceXmlElements = $(docXml).find("province");
$provinceXmlElements.each(function (index, domEle) {
var $provinceXmlValue = $(domEle).attr("name");
var $option = $("<option></option>");
$option.attr("value", $provinceXmlValue);
$option.text($provinceXmlValue);
var $provinceElement = $("#province");
$provinceElement.append($option);
});
$("#province").change(function () {
var $provinceValue = $("#province").val();
//$("#city option[value!='']").each(function(index,domEle){
// $(domEle).remove();
//});
$("#city option[value!='']").remove();
$provinceXmlElements.each(function (index, domEle) {
var $provinceXmlValue = $(domEle).attr("name");
if ($provinceValue == $provinceXmlValue) {
var $cityXmlElements = $(domEle).find("city");
$cityXmlElements.each(function (index, domEle) {
var $cityXmlValue = $(domEle).text();
var $option = $("<option></option>");
$option.attr("value", $cityXmlValue);
$option.text($cityXmlValue);
var $cityElement = $("#city");
$cityElement.append($option);
});
}
});
});
})
</script>
</html>