构建省份城市级联

最近听到很多朋友问关于级联的例子

现在有空就简单的写下

数据存取用的是 xml 文件（也是一个小型数据库哦）

用有些地方用到jquery

下面给出代码

js代码

$().ready(function(){
//加载省份数据
var xml = new ActiveXObject("Msxml2.DOMDocument");
//关闭异步加载，在文档完整加载之前，解析器不会继续执行脚本
xml.async = false;
xml.load("Province.xml");
//加载城市数据
xmlcity = new ActiveXObject("Msxml2.DOMDocument");
//开启异步加载，在文档完整加载之前，解析器会继续执行脚本
xmlcity.async = true;
xmlcity.load("city.xml");

var ProvinceDOM = document.getElementById("ProvinceId");
var cityDOM = document.getElementById("cityId");
//获得省份
var Provinces = xml.getElementsByTagName("Province");
var ProvinceLength = Provinces.length;

for(var j=0;j<ProvinceLength;j++)
{
ProvinceDOM.options.add(createOption(Provinces[j].getAttribute("id"),Provinces[j].childNodes(0).text));
}

$("#ProvinceId").change(function(){
//在获得对应的城市之前先清空之前的城市选项
clearOption();
//用xpath取出对应与选择省的城市
var xmlvalue=xmlcity.getElementsByTagName("city[@ProvinceId='"+$(this).attr("value")+"']");
for(var i=0;i<xmlvalue.length;i++)
{
var va = xmlvalue[i].getAttribute("id");//值
var te = xmlvalue[i].childNodes(0).text;//文本
cityDOM.options.add(createOption(va,te));
}
});

});
//构造下拉框项
function createOption(value,text)
{
var op = new Option();
op.value = value;
op.text = text;
return op;
}
//清空城市项
function clearOption()
{
$("#cityId").html("");
}

html

选择省
<select id="ProvinceId">
<option value="0">===请选择===</option>
</select>
城市：
<select id="cityId">
</select>

接下来 看看两个主要的xml文件

Province.xml 文件的期望格式如下

<?xml version="1.0" encoding="utf-8" ?>
<Provinces>
<Province id="1">
<name>浙江省</name>
</Province>
<Province id="2">

<name>江苏省</name>
</Province>
</Provinces>

city.xml的期望格式如下

<?xml version="1.0" encoding="utf-8" ?>
<citys>
<city id="1" ProvinceId="1">
<name>绍兴</name>
</city>
<city id="2" ProvinceId="1">
<name>嘉兴</name>
</city>
<city id="3" ProvinceId="1">
<name>杭州</name>
</city>
<city id="4" ProvinceId="1">
<name>宁波</name>
</city>
<city id="5" ProvinceId="1">
<name>金华</name>
</city>
<city id="6" ProvinceId="2">
<name>南通市</name>
</city>
<city id="7" ProvinceId="2">
<name>南京市</name>
</city>
<city id="8" ProvinceId="2">
<name>徐州市</name>
</city>
<city id="9" ProvinceId="2">
<name>连云港市</name>
</city>
<city id="10" ProvinceId="2">
<name>淮安市</name>
</city>
</citys>

基本的程序就这样了 比较简单 没用异步方式

别忘了在头部添加对jquery的引用哦

关于具体的解释 我想不太用了吧 大家有什么不懂的地方或者有什么好的建议 欢迎一起讨论

希望对大家有帮助！

演示下载：http://download.csdn.net/source/1619830