JavaScript解析XML实现两级级联下拉列表

最新推荐文章于 2024-04-18 09:50:42 发布
最新推荐文章于 2024-04-18 09:50:42 发布
阅读量567 收藏
点赞数
分类专栏： JavaScript 文章标签： xml javascript function null encoding url
 1.创建测试XML文件:select.xml

  1. <?xml version="1.0" encoding="GBK"?>
  2. <select>
  3.     <province id="sx">
  4.         陕西
  5.         <city id="xa">西安</city>
  6.         <city id="bj">宝鸡</city>
  7.         <city id="ak">安康</city>
  8.     </province>
  9.     <province id="js">
  10.         江苏
  11.         <city id="nj">南京</city>
  12.         <city id="xz">徐州</city>
  13.     </province>
  14.     <province id="sh">
  15.         上海
  16.     </province>
  17. </select>


2.创建HTML页面:select.html

  1. <body>
  3. </body>
  4. <script>
  5.     /**//** 
  6.      * @description 二级级联下拉
  7.      * @author BluesLee
  8.      * @lastModif BluesLee
  9.      * @createDate 2007-10-13
  10.      * @modifDate 2007-10-15
  11.       * @version 1.0
  12.      */
  13.     SelectLevel.prototype.xml;
  14.     SelectLevel.prototype.provinces;
  15.     SelectLevel.prototype.parentName="province";//父节点名称
  16.     SelectLevel.prototype.childName="city";//子节点名称
  17.     SelectLevel.prototype.keyName="id";//属性
  18.     /**//** 
  19.      * 对象SelectLevel的构造器
  20.      * @author BluesLee
  21.      * @lastModif BluesLee
  22.      * @createDate 2007-10-13
  23.      * @modifDate 2007-10-15
  24.       * @version 1.0
  25.      */
  26.     function SelectLevel(parentName,childName,keyName){
  27.         if(parentName!=null && parentName!=""){
  28.             this.parentName=parentName;
  29.         }
  30.         if(childName!=null && childName!=""){
  31.             this.childName=childName;
  32.         }
  33.         if(keyName!=null && keyName!=""){
  34.             this.keyName=keyName;
  35.         }
  36.     }
  37.     /**//** 
  38.      * 加载xml文件
  39.      * @author BluesLee
  40.      * @lastModif BluesLee
  41.      * @createDate 2007-10-13
  42.      * @modifDate 2007-10-15
  43.       * @version 1.0
  44.      */
  45.     SelectLevel.prototype.readXML=function(url){
  46.         var selectXML;
  47.         //如果它受支持，采用标准的2级DOM技术
  48.         if(document.implementation && document.implementation.createDocument){
  49.             //创建新的Document对象
  50.             selectXML=document.implementation.createDocument("","",null);
  51.             //设置装载完毕时触发事件
  52.             selectXML.onload=function(){
  53.                 alert("加载完成");
  54.             }
  55.             selectXML.load(url);
  56.         }else{//IE浏览器创建Document对象
  57.             selectXML=new ActiveXObject("Microsoft.XMLDOM");
  58.             //设置onload
  59.             selectXML.onreadystatechange=function(){
  60.                 if(selectXML.readyState==4){
  61.                     alert("加载完成");
  62.                 }
  63.             }
  64.             selectXML.load(url);
  65.         }
  66.         this.xml=selectXML;
  67.     }
  68.     /**//** 
  69.      * 遍历xml
  70.      * @author BluesLee
  71.      * @lastModif BluesLee
  72.      * @createDate 2007-10-13
  73.      * @modifDate 2007-10-15
  74.       * @version 1.0
  75.      */
  76.     SelectLevel.prototype.iteratorXML=function(node,level){
  77.         var n=node;
  78.         if(n==null){            
  79.             n=this.xml.documentElement;
  80.         }
  82.         if(level==null){
  83.             level=0;
  84.         }
  85.         if(n.nodeType==3){
  86.             for(var i=0;i<level;i++){
  87.                 document.write("-");
  88.             }
  89.             document.write(n.data.trim()+"<br>");
  90.         }else{
  91.             for(var m=n.firstChild;m!=null;mm=m.nextSibling){
  92.                 this.iteratorXML(m,level+1);
  93.             }
  94.         }
  95.     }
  96.     /**//** 
  97.      * 下拉联动
  98.      * @author BluesLee
  99.      * @lastModif BluesLee
  100.      * @createDate 2007-10-13
  101.      * @modifDate 2007-10-15
  102.       * @version 1.0
  103.      */    
  104.     SelectLevel.prototype.changeSelect=function(){
  105.         var city=document.getElementById(this.childName);
  106.         var province=document.getElementById(this.parentName);
  107.         city.options.length=0;
  109.         if(province.value==null || province.value==""){
  110.             city.options.length=1;
  111.             city.options[0].text="请选择…";
  112.             return;
  113.         }
  114.         
  115.         var citys=this.provinces[this[province.value]].getElementsByTagName(this.childName);
  116.         if(citys.length==0){
  117.             citycity.options.length=city.options.length+1;
  118.             city.options[city.options.length-1].value=province.value;
  119.             for(var i=0;i<province.options.length;i++){
  120.                 if(province.options[i].selected){
  121.                     city.options[city.options.length-1].text=province.options[i].text;
  122.                     return;
  123.                 }
  124.             }            
  125.             return;
  126.         }
  127.         city.options.length=citys.length;
  128.         for(var i=0;i<citys.length;i++){
  129.             city.options[i].value=citys[i].getAttribute(this.keyName);
  130.             city.options[i].text=citys[i].firstChild.data.trim();
  131.         }
  132.     }
  133.     /**//** 
  134.      * 初始化下拉列表
  135.      * @author BluesLee
  136.      * @lastModif BluesLee
  137.      * @createDate 2007-10-13
  138.      * @modifDate 2007-10-15
  139.       * @version 1.0
  140.      */    
  141.     SelectLevel.prototype.init=function(parent,province,city){
  142.         thisthis.provinces=this.xml.getElementsByTagName(this.parentName);
  143.         var selectProvince=document.createElement("select");
  144.         var selectCity=document.createElement("select");
  145.         var obj=this;
  147.         selectProvince.setAttribute("name",this.parentName);
  148.         selectProvince.setAttribute("id",this.parentName);
  149.         selectProvince.attachEvent("onchange",function(){obj.changeSelect();});
  150.         selectProvince.options.length=this.provinces.length+1;
  151.         selectProvince.options[0].text="请选择…";
  153.         selectCity.setAttribute("name",this.childName);
  154.         selectCity.setAttribute("id",this.childName);
  155.         selectCity.options.length=1;
  156.         selectCity.options[0].text="请选择…";
  157.         for(var i=0;i<this.provinces.length;i++){
  158.             SelectLevel.prototype[this.provinces[i].getAttribute(this.keyName)]=i;
  159.             selectProvince.options[i+1].value=this.provinces[i].getAttribute(this.keyName);
  160.             selectProvince.options[i+1].text=this.provinces[i].firstChild.data.trim();
  161.             if(this.provinces[i].getAttribute(this.keyName)==province){
  162.                 selectProvince.options[i+1].selected=true;
  163.                 var citys=this.provinces[i].getElementsByTagName(this.childName);                
  164.                 selectCity.options.length=citys.length+1;
  165.                 for(var j=0;j<citys.length;j++){
  166.                     selectCity.options[j+1].value=citys[j].getAttribute(this.keyName);
  167.                     selectCity.options[j+1].text=citys[j].firstChild.data.trim();
  168.                     if(citys[j].getAttribute(this.keyName)==city){
  169.                         selectCity.options[j+1].selected=true;
  170.                     }
  171.                 }
  172.             }
  173.         }
  174.         parent.appendChild(selectProvince);
  175.         parent.appendChild(selectCity);
  176.     }
  178.     String.prototype.trim=function(){        
  179.         return this.replace(/^s*/g,"").replace(/s*$/g,"");
  180.     }
  181.     //测试
  182.     var newnewXML=new SelectLevel();
  183.     newXML.readXML("select.xml");
  184.     newXML.iteratorXML(null,-2);
  185.     newXML.init(document.body,"sx","bj");
  186. </script>


http://blog.csdn.net/lip009/archive/2007/10/15/1825960.aspx
流浪狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSDom加载解析XML文件——下拉列表二级联动篇
weixin_34221276的博客
06-12 169
为什么80%的码农都做不了架构师？>>> ...
JavaScript解析XML实现多级级联下拉列表
深蓝忧郁的技术空间
10-15 4857
1.创建XML文档:cascaded_select.xmlxml version="1.0" encoding="GBK"?>select>    province key="sx" value="陕西">        city key="xa" value="西安"/>        city key="bj" value="宝鸡"/>        city key="wn" val
AJAX二级下拉联动【XML方式】
3y
05-17 356
AJAX二级下拉联动案例 我们在购物的时候，常常需要我们来选择自己的收货地址，先选择省份，再选择城市… 有没有发现：当我们选择完省份的时候，出现的城市全部都是根据省份来给我们选择的。这是怎么做到的呢？？？其实就是通过AJAX来完成的。使用AJAX技术让我们看起来网页非常“智能”，会根据省份来给出对应的城市信息。 我们这里就不读取数据库了，直接在Servlet写死数据来进行模拟测试。 ...
下拉列表的二级联动（ExtJs）
nerveboy学习笔记
03-08 1690
//下面的方法是创建一个下拉列表的二级联动组件，并扔到原先的面板中expansion : function(cfg){ var typeCombStore = new Ext.data.JsonStore({     //一级列表数据 fields : ['value', 'text'], data : [{ 'value' : 1, 'text' : '一类...
xml数据二级联动
伍马
02-03 625
package domain; import com.thoughtworks.xstream.annotations.XStreamAsAttribute; public class City { @XStreamAsAttribute private String name; @XStreamAsAttribute private int code; public City()
JavaScript XML实现两级级联下拉列表
10-30
用xml作为存储容器，不用数据库，速度和效率高些。
解析XML文件实现省市县三级级联下拉菜单
DXL_xiaoli的专栏
03-22 2430
<br />解析XML文件实现省市县三级级联下拉菜单 在我们做项目中难免会遇到这样的问题，当我们注册账号时需要填写详细地址，该地址往往设置省市县三个下拉菜单，这就需要我们考虑三个下拉菜单之间的级联关系。我们选择省之后该如何选择该省下的市呢？又该如何选择省下某个市的区（县）呢？曾经做项目中遇到过此类问题，这就是省、市、县、三级下拉菜单的。今天终于有时间研究了一下此问题，下面以实际案例阐述其原理。 1、以下是我简列出xml部分代码 <?xml version="1.0" encoding="UTF-8
select根据省份从xml文件里面读取城市信息的例子（兼容ff与ie）
xiaowangzi756897098的专栏
09-13 918
前台： 请选择 辽宁 河南 广东 请选择 js: xml文件：沈阳市铁岭县盘锦市锦州市郑州南阳焦作新乡深圳珠海东莞梅州
安卓xml存储读取和sharedpreferences文件存储读取
最新发布
qq_41733851的博客
04-18 116
安卓xml存储读取和sharedpreferences文件存储读取
Optimize XML Transformations
q2315702359的博客
04-14 468
　　Pinpoint inefficiencies and enhance processing speed by analyzing and optimizing each step of your XSLT transformations.　　XSLT profiling features within structured document software are used to analyze and optimize XSLT (Extensible Stylesheet Language Tr
【Go】 编码解码基础，encoding标准库：base64、binrary、json、xml、gob、hex、pem、csv
Bobowen的博客
04-16 780
在 Go 语言中，通过encodingASN.1：适用于处理复杂的数据结构，常用于安全和网络协议中。Base64：用于在文本中表示二进制数据，广泛用于数据编解码。Binary：直接以二进制形式读写固定大小的数据，用于低层数据操作。JSON：处理现代网络通信中普遍使用的数据格式，易于数据交换。XML：用于标记化的数据表示，常见于配置文件和网络服务。CSV：用于读写简单的表格数据，广泛应用于数据导入导出。GOB：Go 特有的二进制格式，优化了同语言间的数据结构传输。HEX。
java的Spring XML和注解解析深入理解
qq_40902295的博客
04-16 773
本篇是Spring源码分析的第一篇，只是分析了refresh中的方法，我们可以看到仅仅是对XML的解析和bean定义的注册缓存，Spring就做了这么多事，并考虑到了各个可能会扩展的地方，那我们平时做的项目呢？看似简单的背后是否有深入思考过呢？
java 解析 xml 字符串转换为实体，实体转换为 xml 字符串
qq_36382892的博客
04-12 345
【代码】java 解析 xml 字符串转换为实体，实体转换为 xml 字符串。
JavaWeb开发03-Mybatis入门-基础操作-XML映射文件-动态SQL
qq_52439738的博客
04-15 792
所有数据库连接池都要实现DataSource这个接口如果要在spring框架下使用德鲁伊连接池只需要引入德鲁伊的起步依赖。
用Jquery框架基于ajax实现三级级联下拉菜单
05-26
好的，我可以为您解答。首先，您需要准备好三个下拉菜单，分别是省、市、区。然后，您需要编写一些后端代码来获取对应的数据。 接下来，您需要使用jQuery框架来实现三级级联下拉菜单。具体步骤如下： 1. 给省的下拉菜单绑定change事件，当省的值改变时，触发事件。 2. 在事件处理函数中，使用ajax向后端请求对应省下的所有市的数据。 3. 获取到市的数据后，清空市和区的下拉菜单，并将市的数据添加到市的下拉菜单中。 4. 给市的下拉菜单绑定change事件，当市的值改变时，触发事件。 5. 在市的事件处理函数中，使用ajax向后端请求对应市下的所有区的数据。 6. 获取到区的数据后，清空区的下拉菜单，并将区的数据添加到区的下拉菜单中。 7. 当区的下拉菜单的值改变时，您可以通过JavaScript获取到所有选中的值，然后将它们进行处理。 这样，您就可以实现三级级联下拉菜单了。当然，具体的实现细节还需要您自己去编写代码实现。希望我的回答对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值