您的位置：首页 > Web前端 > JavaScript

用js和xml实现城市联动

2013-11-25 16:05 585 查看

用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>

js城市联动.rar (1.6 KB)

下载次数: 25

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航