Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)


Posted in jQuery onJune 09, 2017

本文主要介绍使用 Jquery+Ajax+xml,首先需要一个包含我国所有地图信息的xml文档。

此处选用的xml文档(共1000多行)主要结构如下:

<?xml version="1.0" encoding="utf-8"?>
<area Country="China">
 <province ID="1" provinceID="110000" province="北京市">
  <City CityID="110100" City="市辖区">
   <Piecearea PieceareaID="110101" Piecearea="东城区" />
   <Piecearea PieceareaID="110102" Piecearea="西城区" />
   <Piecearea PieceareaID="110103" Piecearea="崇文区" />
   <Piecearea PieceareaID="110104" Piecearea="宣武区" />
   <Piecearea PieceareaID="110105" Piecearea="朝阳区" />
   <Piecearea PieceareaID="110106" Piecearea="丰台区" />
   <Piecearea PieceareaID="110107" Piecearea="石景山区" />
   <Piecearea PieceareaID="110108" Piecearea="海淀区" />
   <Piecearea PieceareaID="110109" Piecearea="门头沟区" />
   <Piecearea PieceareaID="110111" Piecearea="房山区" />
   <Piecearea PieceareaID="110112" Piecearea="通州区" />
   <Piecearea PieceareaID="110113" Piecearea="顺义区" />
   <Piecearea PieceareaID="110114" Piecearea="昌平区" />
   <Piecearea PieceareaID="110115" Piecearea="大兴区" />
   <Piecearea PieceareaID="110116" Piecearea="怀柔区" />
   <Piecearea PieceareaID="110117" Piecearea="平谷区" />
  </City>
<province>

制作对应的表单,根据设置选择省/市的动作:

<h2>地区三级联动菜单</h2>
  省:<select id="province" onchange="showcity()"><option value="0">-请选择-</option></select>
  市:<select id="city" onchange="showdistrict()"><option value="0">-请选择-</option></select>
  地区:<select id="district"><option value="0">-请选择-</option></select>

以下是JS代码行

//声明一个全局变量,用于存储第一次请求的xml信息,避免后续多次频繁请求xml
    var xmldom =null;
    //获取并显示省份信息
    function showprovince(){
      //使用ajax去服务器获得xml文件里面的省份信息
      $.ajax({
        url:'./ChinaArea.xml',
        //data:
        dataType:'xml',//相当于调用responseXML
        type:'get',
        success:function(msg){
          //将返回的xml信息赋予xmldom
          xmldom = msg;
          //获得province 元素节点对象
          var prov = $(msg).find('province');
          //遍历省份信息
          prov.each(function(k,v){
            var nm = $(this).attr('province');
            var id = $(this).attr('provinceID');
            //追加到指定的节点
            $('#province').append("<option value="+id+">"+nm+"</option>");
          });
        }

      });
    }
    //网页加载显示省份信息  
    $(function(){
      showprovince();
    });
    function showcity(){
      //获取 省份 的id
      var pid = $('#province option:selected').val();
      //根据xmldom信息 找到指定的省份节点
      var xml_province = $(xmldom).find('province[provinceID='+pid+']');
      // 获取对应所有县市节点
      var city = $(xml_province).find('City');
      //在遍历追加前,先清空此前已经显示的信息
      $('#city').empty();
      $('#city').append('<option value="0">-请选择-</option>');
      //遍历追加县市
      city.each(function(k,v){
        var nm = $(this).attr('City');
        var id = $(this).attr('CityID');
        $('#city').append('<option value='+id+'>'+nm+'</option>');
      });
    }
    //以下函数的逻辑与showcity()的逻辑一致
    function showdistrict(){
      //获取 县市 的id
      var cid = $('#city option:selected').val();
      //根据xmldom信息 找到指定的县市节点
      var xml_city = $(xmldom).find('City[CityID='+cid+']');
      // 获取对应所有地区节点
      var district = $(xml_city).find('Piecearea');
      $('#district').empty();
      $('#district').append('<option value="0">-请选择-</option>');
      district.each(function(k,v){
        var nm = $(this).attr('Piecearea');
        var id = $(this).attr('PieceareaID');
        $('#district').append('<option value='+id+'>'+nm+'</option>');
      });
    }

以上这篇Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
jquery Ajax实现Select动态添加数据
Jun 08 #jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 #jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
You might like
用户的详细注册和判断
2006/10/09 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
Python基于execjs运行js过程解析
2020/11/27 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
元宵晚会主持词
2014/03/25 职场文书
大学自主招生推荐信
2014/05/10 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL