在页面中实现一组二级联动的下拉列表(可兼容于各种浏览器) 一、需要读取的xml文件: <?xml version="1.0" encoding="UTF-8"?> <provinces> <province name="江苏"> <city name="南京"/> <city name="苏州"/> <city name="镇江"/> <city name="无锡"/> <city name="常州"/> <city name="昆山"/> <city name="徐州"/> </province> <province name="安徽"> <city name="合肥"/> <city name="蚌埠"/> <city name="芜湖"/> <city name="六安"/> <city name="宣城"/> <city name="宿州"/> <city name="黄山市"/> </province> <province name="浙江"> <city name="杭州"/> <city name="金华"/> <city name="湖州"/> </province> <province name="西藏"> <city name="拉萨"/> <city name="日喀则"/> <city name="山南"/> <city name="林芝"/> <city name="昌都"/> <city name="阿里"/> <city name="那曲"/> </province> </provinces> 二、实现二级联动的JavaScript脚本文件: //不同的流覽器加載xml文檔 var xmlDoc; if(window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false; xmlDoc.load("city.xml"); } else if(document.implementation&&document.implementation.createDocument){ xmlDoc=document.implementation.createDocument( "", "",null); xmlDoc.async=false; xmlDoc.load("city.xml"); } else{ alert('Your browser cannot handle this script'); } var root = xmlDoc.documentElement; //初始化數據 function init() { var province = document.getElementById("province"); var city= document.getElementById("city"); for(var i=0 ; i<root.getElementsByTagName("province").length ; i++) { var obj = document.createElement("OPTION"); obj.text = root.getElementsByTagName("province")[i].getAttribute("name"); obj.value = i; if(window.navigator.userAgent.indexOf("MSIE")>=1){ province.add(obj); } else{ province.appendChild(obj); } } if(window.navigator.userAgent.indexOf("MSIE")>=1){ province.attachEvent("onchange",selectCity); addCity(province.options[0].value); } else{ province.addEventListener('change',selectCity, false); addCity(province.options[0].value); } } //切換省份 function selectCity() { deleteCity(document.forms[0].elements[1]); addCity(document.getElementById("province").value); } //清空城市下拉列表的所有 function deleteCity(obj) { for(var i = obj.options.length - 1 ; i>=0 ; i--) { obj.remove(i); } } //添加相應省份的城市信息 function addCity(i) { var citys = xmlDoc.documentElement.getElementsByTagName("province")[i]; for(var i = 0 ; i<citys.getElementsByTagName("city").length ; i++){ var obj = document.createElement("OPTION"); obj.text = citys.getElementsByTagName("city")[i].getAttribute("name"); obj.value = i; document.forms[0].elements[1].options[i] = obj; } } window.onload = init; 三、静态页面的代码: <html> <head> <mce:script src = "city.js"></mce:script> </head> <body> <form> <select id="province"></select> <select id="city"></select> </form> </body> </html>