<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>级联效果</title>

 <script language="javascript" type="text/javascript">

     window.onload = function(){

        document.getElementById("province").onchange = function(){

           var changeProvinceValue = 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;

           //定位到具体省

           var xmlProvinceElements = xmldoc.getElementsByTagName("province");

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

              var xmlProvinceElement=xmlProvinceElements[i];

              var nameAttribute =xmlProvinceElement.getAttribute("name");

              if(changeProvinceValue == nameAttribute){

                 provinceElement = xmlProvinceElement;

                 break;

              }

           }

           if(provinceElement != null){

              var xmlCityElements=provinceElement.getElementsByTagName("city");

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

                 var cityValue=xmlCityElements[i].firstChild.nodeValue;

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

                 optionElement.setAttribute("value",cityValue);

                 var cityTextElement=document.createTextNode(cityValue);

                 optionElement.appendChild(cityTextElement);

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

                 cityElement.appendChild(optionElement);

              }

           }

        }

     }

     function parseXml(filename){

       try{

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

       }

       catch(e){

          try{

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

          }

          catch(e){}

       }

       xmldoc.async = false;

       xmldoc.load(filename);

       return xmldoc;

     }

 </script>

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

 </html>

以下是xml文件(city.xml)：

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

 <china>

     <province name="吉林省">

        <city>长春</city>

        <city>松原</city>

        <city>通化</city>

        <city>四平</city>

     </province>

     <province name="辽宁省">

        <city>沈阳</city>

        <city>大连</city>

        <city>鞍山</city>

        <city>抚顺</city>

     </province>

     <province name="山东省">

        <city>威海</city>

        <city>济南</city>

        <city>青岛</city>

        <city>烟台</city>

     </province>

 </china>

效果：

下拉选择山东，右边的下拉出现相对应的城市。

js实现“级联菜单”的更多相关文章

  1. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...

  2. JS实战 · 级联菜单选择省份和城市（两种）

    DOM编程步骤.思路 1.定义界面:      通过html标签将数据进行封装: 2.定义一些静态样式:      利用css: 3.需要动态地完成的和用户的交互:      a:明确事件源:     ...

  3. js实现级联菜单（没有后台）

    html代码: <!-- js级联菜单 --> <div id="cascMenu"> <select id="select" o ...

  4. JS实现级联菜单

    是首先应该添加两个下拉列表并设置id属性来方便操作: <select id="country"> <option>国家</option> < ...

  5. js进阶 9-12 js如何实现级联菜单 （章节测试）

    js进阶 9-12  js如何实现级联菜单 (章节测试) 一.总结 一句话总结: 1.js如何实现级联菜单 ? 二维数组,以第一级菜单的文本值做键,以对应的二级菜单选项的文本做值 2.用哪个属性可以获 ...

  6. 前台JS(Jquery)调用后台方法 无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.so CasMenu.aspx页 ...

  7. 使用json方式实现省市两级下拉级联菜单[原创]

    本文为博主原创,转载请注明. 首先看一下实现后的效果图: 当然,要完成这个实验,mysql必须与数据库连接,这里选用navicat for mysql这款软件,它与mysql的契合度是很高的,配置环境 ...

  8. Ajax实现动态的二级级联菜单

    今天花了点时间用Ajax实现了一个二级级联菜单.整理总结一下.为了把重点放在Ajax和级联菜单的实现上,本文省略了数据库建表语句和操作数据库的代码! 数据库建表语句就不帖出来了.主要有两张表,区域表: ...

  9. js省市级联实现

    js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...

随机推荐

  1. 第十四节：pandas之merge（）合并

    Pandas提供了一个merge()函数,作为DataFrame对象之间所有标准数据库连接操作的入口pandas.merge(left,right,how='inner',on=None,left_o ...

  2. DFA最小化实例

    原始DFA如下图所示 最小化的定义:1.没有多余的状态(死状态):2.没有两个状态是相互等价的: 两个状态等价的含义:1.兼容性(一致性)——同是终态或同是非终态:2.传播性(蔓延性)——从s出发读入 ...

  3. BZOJ 1601 USACO 2008 Oct. 灌水

    [Description] Farmer John已经决定把水灌到他的n(1<=n<=300)块农田,农田被数字1到n标记.把一块土地进行灌水有两种方法,从其他农田饮水,或者这块土地建造水 ...

  4. 洛谷 P1308 统计单词数【字符串处理】

    题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能,具体要求是:给定一个单词,请你输出它在给 ...

  5. vue中对象属性改变视图不更新问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? let vm = new Vue{ el: '#app', da ...

  6. HDU 5242 上海大都会 G题

    这道题其实是求K条最长的不重叠的链.贪心算法+DFS即可求.深度优先搜索时,返回当前子树的最长链,使用优先队列保存其他孩子结点的最长链,即可.求结果时只需从优先队列中取前K个值的和.这相当于暴力删除每 ...

  7. 利用jQuery设计横/纵向菜单

    在网页中,菜单扮演着"指路者"的角色.怎样设计一个人性化的菜单呢.以下小编带着大家一起做. 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi ...

  8. 小米红米1S 电信/联通版 专用TWRP2.8.1.1中文版 （全屏触摸/支持MTP挂载内外置存储）

    转载请注明出处和链接: http://blog.csdn.net/syhost/article/details/39340477 说说中文TWRP的简史:          中文TWRP是本人在201 ...

  9. win7_32虚拟机网络设置

    今天工作中同事需要使用ie8的浏览器,组内同事没有,想到自己玩的win7_32虚拟机上有ie8,想让对方连接使用,发现自己本机可以远程连接,同事不能连接 排查原因:可能虚拟机使用的是nat模式连接的网 ...

  10. SqlService Date 格式化

    <choose> <when test="dateFlag=='day'"> ), FRI.INVOICE_DATE, ) AS CREATED_ON, & ...