三级联动菜单省----市-----区

zhu473105308

于 2011-03-22 15:22:52 发布

阅读量88

点赞数

文章标签： IE XML 浏览器 Firefox Microsoft

本文链接：https://blog.csdn.net/zhu473105308/article/details/83876451

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>city.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

<h1>
解析xml文件实现省市级联下拉菜单
</h1>

<div>

<span> <select id="province" name="province"
style="width: 80px;">
</select> </span>

<span> <select id="city" name="city">
<option>
请选择相应省下面的市
</option>
</select> </span>
<span> <select id="area" name="area">
<option>
请选择相应省下面的区
</option>
</select> </span>

</div>
</body>
</html>
<script type="text/javascript">
var sheng = document.getElementById("province");
var shi = document.getElementById("city");
var qu = document.getElementById("area");
window.onload = function() {
shi.style.display = "none";
qu.style.display = "none";
var xmlDom;
var bool_IE = (window.ActiveXObject ? true : false);

if (bool_IE) {
//针对的是IE浏览器创建一个空的微软 XML 文档对象
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
} else {

//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("", "", null);

}
xmlDom.async = false;
xmlDom.load("city.xml");
//获取xml根节点
var root = xmlDom.documentElement;
var provinces = root.getElementsByTagName("province");
for ( var i = 0; i < provinces.length; i++) {
var name = provinces[i].getAttribute("name");
var pccode = provinces[i].getAttribute("postcode");
var province = document.createElement("option");
province.appendChild(document.createTextNode(name));
province.setAttribute("value", pccode);
sheng.appendChild(province);

}
//省的改变事件
sheng.onchange = function() {
shi.style.display = "inline-block";
var hprovinces = sheng.getElementsByTagName("option");
var cities = provinces[sheng.selectedIndex]
.getElementsByTagName("city");
shi.length = 0;
for ( var i = 0; i < cities.length; i++) {
var name = cities[i].getAttribute("name");
var pccode = cities[i].getAttribute("postcode");
var city = document.createElement("option");
city.appendChild(document.createTextNode(name));
city.setAttribute("value", pccode);
shi.appendChild(city);

}
}
//市改变的事件
shi.onchange = function() {
qu.style.display = "inline-block";
var hprovinces = sheng.getElementsByTagName("option");
var hcites = shi.getElementsByTagName("option");
var cities = provinces[sheng.selectedIndex]
.getElementsByTagName("city");
var areas = cities[shi.selectedIndex].getElementsByTagName("area");
qu.length = 0;
for ( var i = 0; i < areas.length; i++) {
var name = areas[i].getAttribute("name");
var pccode = areas[i].getAttribute("postcode");
var area = document.createElement("option");
area.appendChild(document.createTextNode(name));
area.setAttribute("value", pccode);
qu.appendChild(area);

}
}
}
</script>

============================================================================
[b][color=darkred]city-xml文件在附件中[/color][/b]