XML:使用DOM技术解析xML文件中的城市,实现select级联选择

中国的城市xml格式:cities.xml

<?xml version="1.0" encoding="utf-8"?>
<china> <province name="北京">
<city>东城区</city>
<city>西城区</city>
<city>崇文区</city>
<city>宣武区</city>
<city>朝阳区</city>
<city>丰台区</city>
<city>石景山区</city>
<city>海淀区</city>
<city>门头沟区</city>
<city>房山区</city>
<city>通州区</city>
<city>顺义区</city>
<city>昌平区</city>
<city>大兴区</city>
<city>怀柔区</city>
<city>平谷区</city>
<city>密云县</city>
<city>延庆县</city>
</province> <province name="天津">
<city>和平区</city>
<city>河东区</city>
<city>河西区</city>
<city>南开区</city>
<city>河北区</city>
<city>红桥区</city>
<city>塘沽区</city>
<city>汉沽区</city>
<city>大港区</city>
<city>东丽区</city>
<city>西青区</city>
<city>津南区</city>
<city>北辰区</city>
<city>武清区</city>
<city>宝坻区</city>
<city>宁河县</city>
<city>静海县</city>
<city>蓟县</city>
</province> <province name="河北">
<city>石家庄</city>
<city>唐山</city>
<city>秦皇岛</city>
<city>邯郸</city>
<city>邢台</city>
<city>保定</city>
<city>张家口</city>
<city>承德</city>
<city>沧州</city>
<city>廊坊</city>
<city>衡水</city>
</province> <province name="山西">
<city>太原</city>
<city>大同</city>
<city>阳泉</city>
<city>长治</city>
<city>晋城</city>
<city>朔州</city>
<city>晋中</city>
<city>运城</city>
<city>忻州</city>
<city>临汾</city>
<city>吕梁</city>
</province> <province name="内蒙古">
<city>呼和浩特</city>
<city>包头</city>
<city>乌海</city>
<city>赤峰</city>
<city>通辽</city>
<city>鄂尔多斯</city>
<city>呼伦贝尔</city>
<city>巴彦淖尔</city>
<city>乌兰察布</city>
<city>兴安盟</city>
<city>锡林郭勒盟</city>
<city>阿拉善盟</city>
</province> <province name="辽宁">
<city>沈阳</city>
<city>大连</city>
<city>鞍山</city>
<city>抚顺</city>
<city>本溪</city>
<city>丹东</city>
<city>锦州</city>
<city>营口</city>
<city>阜新</city>
<city>辽阳</city>
<city>盘锦</city>
<city>铁岭</city>
<city>朝阳</city>
<city>葫芦岛</city>
</province> <province name="吉林">
<city>长春</city>
<city>吉林</city>
<city>四平</city>
<city>辽源</city>
<city>通化</city>
<city>白山</city>
<city>*</city>
<city>白城</city>
<city>延边</city>
</province> <province name="黑龙江">
<city>哈尔滨</city>
<city>齐齐哈尔</city>
<city>鸡西</city>
<city>鹤岗</city>
<city>双鸭山</city>
<city>大庆</city>
<city>伊春</city>
<city>佳木斯</city>
<city>七台河</city>
<city>牡丹江</city>
<city>黑河</city>
<city>绥化</city>
<city>大兴安岭</city>
</province> <province name="上海">
<city>黄浦区</city>
<city>卢湾区</city>
<city>徐汇区</city>
<city>长宁区</city>
<city>静安区</city>
<city>普陀区</city>
<city>闸北区</city>
<city>虹口区</city>
<city>杨浦区</city>
<city>闵行区</city>
<city>宝山区</city>
<city>嘉定区</city>
<city>浦东新区</city>
<city>金山区</city>
<city>松江区</city>
<city>青浦区</city>
<city>南汇区</city>
<city>奉贤区</city>
<city>崇明县</city>
</province> <province name="江苏">
<city>南京</city>
<city>无锡</city>
<city>徐州</city>
<city>常州</city>
<city>苏州</city>
<city>南通</city>
<city>连云港</city>
<city>淮安</city>
<city>盐城</city>
<city>扬州</city>
<city>镇江</city>
<city>泰州</city>
<city>宿迁</city>
</province> <province name="浙江">
<city>杭州</city>
<city>宁波</city>
<city>温州</city>
<city>嘉兴</city>
<city>湖州</city>
<city>绍兴</city>
<city>金华</city>
<city>衢州</city>
<city>舟山</city>
<city>台州</city>
<city>丽水</city>
</province> <province name="安徽">
<city>合肥</city>
<city>芜湖</city>
<city>蚌埠</city>
<city>淮南</city>
<city>马鞍山</city>
<city>淮北</city>
<city>铜陵</city>
<city>安庆</city>
<city>黄山</city>
<city>滁州</city>
<city>阜阳</city>
<city>宿州</city>
<city>巢湖</city>
<city>六安</city>
<city>亳州</city>
<city>池州</city>
<city>宣城</city>
</province> <province name="福建">
<city>福州</city>
<city>厦门</city>
<city>莆田</city>
<city>三明</city>
<city>泉州</city>
<city>漳州</city>
<city>南平</city>
<city>龙岩</city>
<city>宁德</city>
</province> <province name="江西">
<city>南昌</city>
<city>景德镇</city>
<city>萍乡</city>
<city>九江</city>
<city>新余</city>
<city>鹰潭</city>
<city>赣州</city>
<city>吉安</city>
<city>宜春</city>
<city>抚州</city>
<city>上饶</city>
</province> <province name="山东">
<city>济南</city>
<city>青岛</city>
<city>淄博</city>
<city>枣庄</city>
<city>东营</city>
<city>烟台</city>
<city>潍坊</city>
<city>济宁</city>
<city>泰安</city>
<city>威海</city>
<city>日照</city>
<city>莱芜</city>
<city>临沂</city>
<city>德州</city>
<city>聊城</city>
<city>滨州</city>
<city>荷泽</city>
</province> <province name="河南">
<city>郑州</city>
<city>开封</city>
<city>洛阳</city>
<city>平顶山</city>
<city>安阳</city>
<city>鹤壁</city>
<city>新乡</city>
<city>焦作</city>
<city>濮阳</city>
<city>许昌</city>
<city>漯河</city>
<city>三门峡</city>
<city>南阳</city>
<city>商丘</city>
<city>信阳</city>
<city>周口</city>
<city>驻马店</city>
</province> <province name="湖北">
<city>武汉</city>
<city>黄石</city>
<city>十堰</city>
<city>宜昌</city>
<city>襄樊</city>
<city>鄂州</city>
<city>荆门</city>
<city>孝感</city>
<city>荆州</city>
<city>黄冈</city>
<city>咸宁</city>
<city>随州</city>
<city>恩施</city>
<city>神农架</city>
</province> <province name="湖南">
<city>长沙</city>
<city>株洲</city>
<city>湘潭</city>
<city>衡阳</city>
<city>邵阳</city>
<city>岳阳</city>
<city>常德</city>
<city>张家界</city>
<city>益阳</city>
<city>郴州</city>
<city>永州</city>
<city>怀化</city>
<city>娄底</city>
<city>湘西</city>
</province> <province name="广东">
<city>广州</city>
<city>韶关</city>
<city>深圳</city>
<city>珠海</city>
<city>汕头</city>
<city>佛山</city>
<city>江门</city>
<city>湛江</city>
<city>茂名</city>
<city>肇庆</city>
<city>惠州</city>
<city>梅州</city>
<city>汕尾</city>
<city>河源</city>
<city>阳江</city>
<city>清远</city>
<city>东莞</city>
<city>中山</city>
<city>潮州</city>
<city>揭阳</city>
<city>云浮</city>
</province> <province name="广西">
<city>南宁</city>
<city>柳州</city>
<city>桂林</city>
<city>梧州</city>
<city>北海</city>
<city>防城港</city>
<city>钦州</city>
<city>贵港</city>
<city>玉林</city>
<city>百色</city>
<city>贺州</city>
<city>河池</city>
<city>来宾</city>
<city>崇左</city>
</province> <province name="海南">
<city>海口</city>
<city>三亚</city>
</province> <province name="重庆">
<city>重庆</city>
<city>万州区</city>
<city>涪陵区</city>
<city>渝中区</city>
<city>大渡口区</city>
<city>江北区</city>
<city>沙坪坝区</city>
<city>九龙坡区</city>
<city>南岸区</city>
<city>北碚区</city>
<city>万盛区</city>
<city>双桥区</city>
<city>渝北区</city>
<city>巴南区</city>
<city>黔江区</city>
<city>长寿区</city>
<city>綦江县</city>
<city>潼南县</city>
<city>铜梁县</city>
<city>大足县</city>
<city>荣昌县</city>
<city>璧山县</city>
<city>梁平县</city>
<city>城口县</city>
<city>丰都县</city>
<city>垫江县</city>
<city>武隆县</city>
<city>忠县</city>
<city>开县</city>
<city>云阳县</city>
<city>奉节县</city>
<city>巫山县</city>
<city>巫溪县</city>
<city>石柱土家族自治县</city>
<city>秀山土家族苗族自治县</city>
<city>酉阳土家族苗族自治县</city>
<city>彭水苗族土家族自治县</city>
<city>江津</city>
<city>合川</city>
<city>永川</city>
<city>南川</city>
</province> <province name="四川">
<city>成都</city>
<city>自贡</city>
<city>攀枝花</city>
<city>泸州</city>
<city>德阳</city>
<city>绵阳</city>
<city>广元</city>
<city>遂宁</city>
<city>内江</city>
<city>乐山</city>
<city>南充</city>
<city>眉山</city>
<city>宜宾</city>
<city>广安</city>
<city>达州</city>
<city>雅安</city>
<city>巴中</city>
<city>资阳</city>
<city>阿坝</city>
<city>甘孜</city>
<city>凉山</city>
</province> <province name="贵州">
<city>贵阳</city>
<city>六盘水</city>
<city>遵义</city>
<city>安顺</city>
<city>铜仁</city>
<city>黔西南</city>
<city>毕节</city>
<city>黔东南</city>
<city>黔南</city>
</province> <province name="云南">
<city>昆明</city>
<city>曲靖</city>
<city>玉溪</city>
<city>保山</city>
<city>昭通</city>
<city>丽江</city>
<city>思茅</city>
<city>临沧</city>
<city>楚雄</city>
<city>红河</city>
<city>文山</city>
<city>西双版纳</city>
<city>大理</city>
<city>德宏</city>
<city>怒江</city>
<city>迪庆</city>
</province> <province name="*">
<city>拉萨</city>
<city>昌都</city>
<city>山南</city>
<city>日喀则</city>
<city>那曲</city>
<city>阿里</city>
<city>林芝</city>
</province> <province name="陕西">
<city>西安</city>
<city>铜川</city>
<city>宝鸡</city>
<city>咸阳</city>
<city>渭南</city>
<city>延安</city>
<city>汉中</city>
<city>榆林</city>
<city>安康</city>
<city>商洛</city>
</province> <province name="甘肃">
<city>兰州</city>
<city>嘉峪关</city>
<city>金昌</city>
<city>白银</city>
<city>天水</city>
<city>武威</city>
<city>张掖</city>
<city>平凉</city>
<city>酒泉</city>
<city>庆阳</city>
<city>定西</city>
<city>陇南</city>
<city>临夏</city>
<city>甘南</city>
</province> <province name="青海">
<city>西宁</city>
<city>海东</city>
<city>海北</city>
<city>黄南</city>
<city>海南</city>
<city>果洛</city>
<city>玉树</city>
<city>海西</city>
</province> <province name="宁夏">
<city>银川</city>
<city>石嘴山</city>
<city>吴忠</city>
<city>固原</city>
<city>中卫</city>
</province> <province name="*">
<city>乌鲁木齐</city>
<city>克拉玛依</city>
<city>吐鲁番</city>
<city>哈密</city>
<city>昌吉</city>
<city>博尔塔拉</city>
<city>巴音郭楞</city>
<city>阿克苏</city>
<city>克孜勒苏</city>
<city>喀什</city>
<city>和田</city>
<city>伊犁</city>
<city>塔城</city>
<city>阿勒泰</city>
<city>石河子</city>
<city>阿拉尔</city>
<city>图木舒克</city>
<city>五家渠</city>
</province> <province name="香港">
<city>香港</city>
</province> <province name="澳门">
<city>澳门</city>
</province> <province name="*">
<city>*</city>
</province> </china>

下面,使用DOM解析xML文件中的城市,实现select级联选择

最基本的方法:selecCity.html

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用DOM解析city.xml,进行城市二级级联操作</title> <script type="text/javascript">
//给加载页面绑定事件
window.onload = function(){ //从cities.xml文档中获取所有的#province节点
//创建并添加所有的#province节点
var provinceEle = document.getElementById('province');
var xmlDoc = parseXML("cities.xml");
provinceNodes = xmlDoc.getElementsByTagName('province');
for (var i = 0; i < provinceNodes.length; i++) {
var paraNode = provinceNodes[i].getAttributeNode("name");//属性节点
var optionNode = document.createElement('option'); //创建省份province的option子节点
optionNode.innerHTML = paraNode.nodeValue;
provinceEle.appendChild(optionNode);
}; //为#province添加change响应事件
provinceEle.onchange = function(){ //先把#city节点除第一个子节点外都移除(注意:每清除一次,数组是变化的)
var cityNode = document.getElementById('city');
var optionNodes = cityNode.childNodes;
var len = optionNodes.length;
for (var i = 2; i <len; i++) {
cityNode.removeChild(optionNodes[2]);
} if(this.value == "请选择...") return; //获取对应的所有#city节点
for (var i = 0; i < provinceNodes.length; i++) {
var paraNode = provinceNodes[i].getAttributeNode("name");//属性节点
if (paraNode.nodeValue == this.value) { //接着获取每一个#province对应的#city节点
var allsubTextNodes = provinceNodes[i].childNodes;
for (var k = 0; k < allsubTextNodes.length; k++) {
var optionNode = document.createElement('option');//创建城市city的option子节点
optionNode.innerHTML = allsubTextNodes[k].firstChild.nodeValue;
cityNode.appendChild(optionNode);
}
}
}
} //创建XML解析器
function parseXML(xmlFile){
try //Internet Explorer---ie浏览器的解析器创建方式如下:
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try //Firefox, Mozilla, Opera, etc. 火狐等浏览器的创建方式。
{
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e)
{
alert(e.message);
return; //如果创建不成功,就直接返回,不往下走。
}
}
if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
return xmlDoc; //返回创建好的解析器,传给调用者。
}
}
</script> </head>
<body>
中国城市二级级联选择<br>
<select id="province">
<option>请选择...</option>
</select>
<select id="city">
<option>请选择...</option>
</select>
</body>
</html>

其实,还有一个更简单的方法,使用XPath技术,下面的实现效果是一样哟:selecCity2.html

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用DOM解析city.xml,进行城市二级级联操作</title> <script type="text/javascript">
//给加载页面绑定事件
window.onload = function(){ //从cities.xml文档中获取所有的#province节点
//创建并添加所有的#province节点
var provinceEle = document.getElementById('province');
var xmlDoc = parseXML("cities.xml");
var xmlPath = "/china/province" //获取所有的#province属性节点
var allProvinces = returnNodes(xmlDoc,xmlPath);
alert(allProvinces.length); alert(returnNodes(xmlDoc,xmlPath).length); for (var i = 0; i < allProvinces.length; i++) {
var nameNode = allProvinces[i].getAttributeNode("name");//属性节点
var optionNode = document.createElement('option'); //创建省份province的option子节点
optionNode.innerHTML = nameNode.nodeValue;
provinceEle.appendChild(optionNode);
}; //为#province添加change响应事件
provinceEle.onchange = function(){ //先把#city节点除第一个子节点外都移除(注意:每清除一次,数组是变化的)
var cityNode = document.getElementById('city');
var cityOptions = cityNode.childNodes;
var len = cityOptions.length;
for (var i = 2; i <len; i++) {
cityNode.removeChild(cityOptions[2]);
} //省份没有选择,直接不执行下面的语句
if (this.value == "请选择...") return; //获取#province对应下的所有子节点#city
xmlPath = "//province[@name='"+this.value+"']"
var optionNodes = returnNodes(xmlDoc,xmlPath);
var cityNodes = optionNodes[0].childNodes;
for (var i = 0; i < cityNodes.length; i++) {
var optionNode = document.createElement('option');//创建城市city的option子节点
optionNode.innerHTML = cityNodes[i].firstChild.nodeValue;
cityNode.appendChild(optionNode);
}
} //创建XML解析器
function parseXML(xmlFile){ try //Internet Explorer---ie浏览器的解析器创建方式如下:
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try //Firefox, Mozilla, Opera, etc. 火狐等浏览器的创建方式。
{
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e)
{
alert(e.message);
return; //如果创建不成功,就直接返回,不往下走。
}
}
if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
return xmlDoc; //返回创建好的解析器,传给调用者。
} //使用XPath技术获取所有的元素节点
function returnNodes(xmlDoc,xmlPath) {
// code for IE
if (window.ActiveXObject)
{
return xmlDoc.selectNodes(xmlPath);
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
return xmlDoc.evaluate(xmlPath, xmlDoc, null, XPathResult.ANY_TYPE,null);
}
}
}
</script> </head>
<body>
中国城市二级级联选择<br>
<select id="province">
<option>请选择...</option>
</select>
<select id="city">
<option>请选择...</option>
</select>
</body>
</html>

拓展:判断浏览器类型,这儿还给出判断一个浏览器的方法:

//判断浏览器
function myBrowser(){
//取得浏览器的userAgent字符串
var explorer = window.navigator.userAgent ;
//iE
if (explorer.indexOf("MSIE") > -1 && explorer.indexOf("compatible") > -1 && !explorer.indexOf("Opera")) {
return "IE";
}
//firefox
else if (explorer.indexOf("Firefox") > -1) {
return "Firefox";
}
//Chrome
else if(explorer.indexOf("Chrome") > -1){
return "Chrome";
}
//Opera
else if(explorer.indexOf("Opera") > -1){
return "Opera";
}
//Safari
else if(explorer.indexOf("Safari") > -1){
return "Safari";
}
}

效果图显示:

XML:使用DOM技术解析xML文件中的城市,实现select级联选择 XML:使用DOM技术解析xML文件中的城市,实现select级联选择

上一篇:silverlight简单数据绑定3


下一篇:web.xml 文件中一般包括 servlet, spring, filter, listenr的配置的加载顺序