Use Jquery+Ajax+xml to create three-level linkage effects

The following editor will bring you an articleJquery+Ajax+xml to achieve the effect of selecting a three-level linkage menu in China (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

This article mainly introduces the use of Jquery+Ajax+xml. First, you need an xml document that contains all the map information in our country.

The main structure of the xml document selected here (more than 1,000 lines in total) is as follows:

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

Make the corresponding form and select the actions of the province/city according to the settings:

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

The following are Lines of JS code

##

//声明一个全局变量，用于存储第一次请求的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');
            //追加到指定的节点
            $(&#39;#province&#39;).append("<option value="+id+">"+nm+"</option>");
          });
        }

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

The above is the detailed content of Use Jquery+Ajax+xml to create three-level linkage effects. For more information, please follow other related articles on the PHP Chinese website!