登录  /  注册
首页 > web前端 > js教程 > 正文

Jquery、Ajax、xml实现三级联动菜单效果

小云云
发布: 2018-01-10 10:10:20
原创
1618人浏览过

本文主要为大家带来一篇jquery+ajax+xml实现中国地区选择三级联动菜单效果(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

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

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

<?xml  version="1.0" encoding="utf-8"?><area>
 <province>
  <city>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
   <piecearea></piecearea>
  </city><province></province></province>
登录后复制

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

<h2>地区三级联动菜单</h2>
  省:<select><option>-请选择-</option></select>
  市:<select><option>-请选择-</option></select>
  地区:<select><option>-请选择-</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>"+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>-请选择-</option>');
      //遍历追加县市
      city.each(function(k,v){
        var nm = $(this).attr('City');
        var id = $(this).attr('CityID');
        $('#city').append('<option>'+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>-请选择-</option>');
      district.each(function(k,v){
        var nm = $(this).attr('Piecearea');
        var id = $(this).attr('PieceareaID');
        $('#district').append('<option>'+nm+'</option>');
      });
    }
登录后复制

相关推荐:

ajax三级联动的实现方法

实现ajax三级联动效果简单方法

用vue.js模仿京东省市区三级联动的选择组件

以上就是Jquery、Ajax、xml实现三级联动菜单效果的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号