Dom和xml的二级联动

最新推荐文章于 2024-08-04 16:33:59 发布

gt2008gt

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量97

点赞数

分类专栏： javascript学习文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/gt2008gt/article/details/84161986

版权

javascript学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要学习下javascript对XML的操作




代码如下：
		<script type="text/javascript">
	window.onload = function() {
		var xmlDoc = parseXml("images/cities.xml");

		//获取XML的节点
		var provinceNodes = xmlDoc.getElementsByTagName("province");

		//获取省的节点

		var provinceNode = document.getElementById("province");

		//获取市的节点

		var citiesHtmlNode = document.getElementById("city");

		for ( var i = 0; i < provinceNodes.length; i++) {

			//创建option 下拉框值

			var optionNode = document.createElement("option");

			//获取省的名称

			var value = provinceNodes[i].getAttribute("name");

			//为option添加文本节点   值为省的name属性值

			optionNode.appendChild(document.createTextNode(value));

			optionNode.setAttribute("value", value); //为添加的option设置值

			//添加到provinceNode节点中

			provinceNode.appendChild(optionNode);

		}

		provinceNode.onchange = function() {
			//清空原有的的节点

			//获取清空的select里面的所有的option对象

			var cityHtmlOptionNodes = citiesHtmlNode
					.getElementsByTagName("option");//获取的是所有的option

			//获取长度         

			var len = cityHtmlOptionNodes.length;

			for ( var m = 0; m < len; m++) {

				//看是否有第一个对象，【1】代表的第二个对象，如果不为空

				if (cityHtmlOptionNodes[1]) {

					//始终移除第二个对象

					citiesHtmlNode.remove(cityHtmlOptionNodes[1]);

				}

			}
			
	  for (var i = 0; i < provinceNodes.length; i++) {
	         //判断点击的是否是value

                if (this.value == provinceNodes[i].getAttribute("name")) {
                 var citiesNode = provinceNodes[i].getElementsByTagName("city");
                    for (var j = 0; j < citiesNode.length; j++) {
                        var cityOptionNode = document.createElement("option");

                      
                     // alert(citiesNode.length);

            //为创建的option对象添加文本 citieNode[j].firstChild.value                        
        cityOptionNode.appendChild(document.createTextNode(citiesNode[j].firstChild.nodeValue));

                        //把创建的对象添加到city中

                        citiesHtmlNode.appendChild(cityOptionNode);

                    
                    
                    }
	          }		
                
                
                
                
                
                
                }

	      
	        

	
	
	
	
	
	
		}

	}

	//解析xml文档

	function parseXml(filename) {

		var xmlDoc;

		try {

			//IE浏览器

			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

		}

		catch (e) {

			try {

				//非IE浏览器

				xmlDoc = document.implementation.createDocument("", "", null);

			}

			catch (ex) {

				alert("你使用的是不是浏览器呀！");

			}

		}

		//解析的时候是异步还是同步,设置为false，是关闭异步加载，这样确保在文档完全加载之前不会继续脚本的执行

		xmlDoc.async = false;

		xmlDoc.load(filename);

		return xmlDoc;

	}
</script>

	</head>

	<body>
		<div align="center">

			<div id="data">

				<select id="province">

					<option>
						请选择省
					</option>

				</select>

				<select id="city">

					<option>
						请选择市
					</option>

				</select>

				<select id="country">

					<option>
						请选择市
					</option>

				</select>

			</div>

		</div>


	</body>
</html>


用到的xml文件为：

<?xml version="1.0" encoding="GBK"?>

<china>

         <province name="河北">

                   <city name="石家庄">

                            

                   </city>

                   <city name="廊坊">

                   </city>

                   <city name="保定">

                   </city>

                   <city name="邢台">

                   </city>

                   <city name="沧州">

                            

                   </city>

                   <city name="衡水">

                            

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

         </province>

         <province name="安徽">

                   <city>阜阳</city>

                   <city>亳州</city>

                   <city>合肥</city>

         </province>

 

</china>

gt2008gt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom和xml的二级联动

主要学习下javascript对XML的操作代码如下： &lt;script type="text/javascript"&gt; window.onload = function() { var xmlDoc = parseXml("images/cities.xml"); //获取XML的节点 var provinceNodes = xmlD...
复制链接

扫一扫

专栏目录