1.city.xml
<?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>四平</city> <city>通化</city> </province> <province name="辽宁省"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> </province> <province name="山东省"> <city>济南</city> <city>青岛</city> <city>威海</city> </province> </china>
2.city.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test01.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <select id="province" name="province"> <option value="">请选择....</option> <option value="吉林省">吉林省</option> <option value="辽宁省">辽宁省</option> <option value="山东省">山东省</option> </select> <select id="city" name="city"> <option value="">请选择.....</option> </select> </body> <script type="text/javascript"> window.onload=function(){ document.getElementById("province").onchange=function(){ //取得省值 var selectProvince=this.value; //获取城市节点 var cityElement=document.getElementById("city"); //删除的时候从后往前删 var cityOptionElements=cityElement.getElementsByTagName("option"); for(var i=cityOptionElements.length-1;i>0;i--){ cityElement.removeChild(cityOptionElements[i]); } //解析xml文件 var xmlDoc=parseXML("city.xml"); //声明省的节点 var provinceElement=null; //解析XML节点 var provinceXmlElements=xmlDoc.getElementsByTagName("province"); for(var i=0;i<provinceXmlElements.length;i++){ var provinceXmlElement=provinceXmlElements[i]; var xmlNameValue=provinceXmlElement.getAttribute("name"); if(selectProvince==xmlNameValue){ provinceElement=provinceXmlElement; break; } } //在城市下增加option元素 if(provinceElement!=null){ var cityXmlElements=provinceElement.getElementsByTagName("city"); for(var i=0;i<cityXmlElements.length;i++){ var cityXmlElement=cityXmlElements[i]; var cityxmlValue=cityXmlElement.firstChild.nodeValue; var optionElement=document.createElement("option"); optionElement.setAttribute("value",cityxmlValue); var textElement=document.createTextNode(cityxmlValue); optionElement.appendChild(textElement); cityElement.appendChild(optionElement); } } } } //解析xml文件 function parseXML(filename){ var xmlDoc; try{ //Internet Explorer xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e){ try{ //Firefox, Mozilla, Opera, etc. xmlDoc=document.implementation.createDocument("","",null); } catch(e){} } //关闭异步加载 xmlDoc.async=false; xmlDoc.load(filename); return xmlDoc; } </script> </html>
相关推荐
JavaScript+xml实现下拉二级联动菜单 JavaScript+xml实现下拉二级联动菜单
本代码实现了 省地县三级联动展现,从xml文件中读取省地县的数据。
主要介绍了使用javascript中读取Xml文件做成的一个二级联动菜单,需要的朋友可以参考下
之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1.首先在jsp页面的...
11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口...
11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口...
• sample01.htm 将JavaScript代码插入在标签与标签之间 • sample02.htm 将JavaScript代码放在了标签与标签之间 • sample03.htm JavaScript与HTML混合执行 • sample04.htm 在同...
SharpRewriter:javascript + xml技术利用#实现url重定向 采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行...
22.如何实现从服务器端向页面动态添加javascript脚本-示例1 22.如何实现从服务器端向页面动态添加javascript脚本-示例2 24.如何处理多页面重定向到同一页面后的返回问题 25.如何用Response.Redirect方法传递汉字 ...
里面包含表单验证,google搜索提示,中文处理,二级联动......等案例.
如何将XML作为数据源绑定到控件 第8章 数据库设计 143.ASP.NET应用程序如何实现与SQL Server数据库的连接 144.ASP.NET应用程序如何实现与ACCESS数据库的连接 146.如何使用ADO.NET在数据库执行SQL...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
-增加中国的省市县三级联动示例(data/shengshixian.aspx)(feedback:Blues T)。 -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用...
05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法 02 jquery循环方法和attr,prop方法 03 jquery...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...
10-20 5 smarty二级联动 10-20 6 smarty完成静态化 10-20 7 10-20 8 smarty分页技术 10-20 9 10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式...