构建省份城市级联

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

现在有空就简单的写下

数据存取用的是 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