用js和xml实现城市联动，目前只在ie8中运行过。还有些bug希望指出。
<script type="text/javascript">
window.onload = function ()
{
//得到省的select节点
var provences = document.getElementById("prvence");
provences.onchange = function ()
{
var provenceName = this.value;
var city = document.getElementById("city"); //删除city中的原有数据
var citys = city.getElementsByTagName("option"); //在省的下拉框出现onchange的时候先清空city的下拉框的内容
var lens = citys.length;
for(var k=lens-1;k>=0;k--)
{
city.removeChild(citys[k]);
}
var xmlDoc = loadXML("cities.xml"); //加载xml文档，并获得xml文档对象
var provence = xmlDoc.getElementsByTagName("provence");
var len = provence.length; //省的节点一共有多少个
var cities = new Array();
for(var i=0;i<len;i++)//xml中省的节点
{
var provenceElements = provence[i];
pro = provenceElements.getAttribute("name");
if(provenceName==pro)
{
cities = provenceElements.getElementsByTagName("city");
}
}
var optionies = new Array();
for(var j=0;j<cities.length;j++)
{
optionies = document.createElement("option");
optionies.innerText= cities[j].text;
city.appendChild(optionies);
}
}
}
//加载xml文档
var xmlDoc;
function loadXML(fname) {
var xmlDoc;
try
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
} catch (e)
{
try {
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e)
{
alert(e.message);
}
}
try
{
xmlDoc.async = false;
xmlDoc.load(fname);
}
catch (e) {
}
return xmlDoc;
}
</script>
下面是整个代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现联动</title>
<!--当用户选择一个省时第二个下拉框出现相应省的市-->
<script type="text/javascript">
window.onload = function ()
{
//得到省的select节点
var provences = document.getElementById("prvence");
provences.onchange = function ()
{
var provenceName = this.value;
var city = document.getElementById("city"); //删除city中的原有数据
var citys = city.getElementsByTagName("option"); //在省的下拉框出现onchange的时候先清空city的下拉框的内容
var lens = citys.length;
for(var k=lens-1;k>=0;k--)
{
city.removeChild(citys[k]);
}
var xmlDoc = loadXML("cities.xml"); //加载xml文档，并获得xml文档对象
var provence = xmlDoc.getElementsByTagName("provence");
var len = provence.length; //省的节点一共有多少个
var cities = new Array();
for(var i=0;i<len;i++)//xml中省的节点
{
var provenceElements = provence[i];
pro = provenceElements.getAttribute("name");
if(provenceName==pro)
{
cities = provenceElements.getElementsByTagName("city");
}
}
var optionies = new Array();
for(var j=0;j<cities.length;j++)
{
optionies = document.createElement("option");
optionies.innerText= cities[j].text;
city.appendChild(optionies);
}
}
}
//加载xml文档
var xmlDoc;
function loadXML(fname) {
var xmlDoc;
try
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
} catch (e)
{
try {
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e)
{
alert(e.message);
}
}
try
{
xmlDoc.async = false;
xmlDoc.load(fname);
}
catch (e) {
}
return xmlDoc;
}
</script>
</head>
<body>
<select id="prvence">
<option>----请选择----</option>
<option value="北京市">北京市</option>
<option value="湖南省">湖南省</option>
<option value="黑龙江">黑龙江</option>
<option value="广东省">广东省</option>
</select>
<select id="city">
<option>----请选择----</option>
</select>
</body>
</html>
还有一个xml文档
<?xml version="1.0" encoding="utf-8"?> <china> <provence name="湖南省"> <city>长沙</city> <city>常德</city> <city>沈阳</city> <city>邵阳</city> </provence> <provence name="北京市"> <city>昌平</city> <city>海淀</city> <city>朝阳</city> <city>西城</city> </provence> <provence name="黑龙江"> <city>漯河</city> <city>黑河</city> </provence> <provence name="广东省"> <city>广州</city> <city>东莞</city> </provence> </china>