[Ajax] 案例 -- 三级联动

案例 – 三级联动

什么是三级联动呢?

三个级别，联动代表这三个级别相互依赖与嵌套，唯有这样才能实现三级联动.

三级联动简单理解可以理解为两个二级联动,

• 只有点击省才能出现下一级的市

• 只有点击市才能出现下一级的区

 
 

在正式写之前,要先了解一下json,可以观看原来的内容

首先要创建三级联动(或者二级联动),那必不可少的就是数据库了,写的比较随意,主要测试效果

[
  {
    "province": "吉林省",
    "cities": [
      {
        "city": "长春市",
        "counties": ["朝阳区", "经济开发区", "高新区"]
      },
      {
        "city": "吉林市",
        "counties": ["东城区", "经济开发区", "老城区"]
      },

      {
        "city": "白山市",
        "counties": ["二道区", "河东区", "高新区"]
      }
    ]
  },
  {
    "province": "辽宁省",
    "cities": [
      {
        "city": "沈阳市",
        "counties": ["朝阳区", "经济开发区", "高新区"]
      },
      {
        "city": "大连市",
        "counties": ["东城区", "经济开发区", "老城区"]
      },
      {
        "city": "铁岭市",
        "counties": ["二道区", "河东区", "高新区"]
      }
    ]
  },
  {
    "province": "山东省",
    "cities": [
      {
        "city": "青岛市",
        "counties": ["朝阳区", "经济开发区", "高新区"]
      },
      {
        "city": "济南市",
        "counties": ["东城区", "经济开发区", "老城区"]
      },
      {
        "city": "威海市",
        "counties": ["二道区", "河东区", "高新区"]
      }
    ]
  }
]

 
 

三级联动,肯定要有三个选择列表,所以,先创建三个<select>,为之后的能够点击省市区县的选择列表做准备,命名为'province','city','county'

• < option > 与 < option /> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值，使其不为空。

<select id="province">
    <option value="none">--请选择省--</option>
</select>
<select id="city">
    <option value="none">--请选择市--</option>
</select>
<select id="county">
    <option value="none">--请选择县或区--</option>
</select>

• 创建一个固定的js文件,适用于Chrome, Firefox, Safari, …/IE浏览器/IE 7+/IE 6-

function createXMLHttpRequest(){
    var httpReguest;
    if (window.XMLHttpRequest) {//适用于Chrome, Firefox, Safari, ..
        httpRequest = new XMLHttpRequest();
    } else if(window.ActiveXObject) {//适用于IE浏览器
        try {
            httpRequest = new ActiveXObiect("Msxml2.XMLHTTP");//IE 7+
        } catch(e){
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");// IE 6-
            } catch(e){}
        }
    }
    return httpRequest;
}

 
 

之后写js,前面说到,要做到三级联动,首先需要完成两级联动,也就是说要完成省和市的联动以及市和县区的联动

• 为了完成省市联动和市区联动,首先要获取到省市区三个的下拉列表

var provinceElement = document.getElementById("province");
var cityElement = document.getElementById("city");
var countyElement = document.getElementById("county");

• 首先在页面加载完毕的时候,要确保能够动态的获取到省份的信息
  • 得到服务器返回的数据
  • 将JSON字符串转换为JSON对象
  • 将数据更新带HTML页面中

var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 得到服务器端返回的数据
        var response = xhr.responseText;
        // 将JSON字符串转换成JSON对象
        datas = JSON.parse(response);
        for (var i = 0; i < datas.length; i++) {
            var data = datas[i];
            var province = data.province;
            // 将数据更新到HTML页面中
            var opt = document.createElement("option");
            opt.setAttribute("value", province);
            opt.textContent = province;
            provinceElement.appendChild(opt);
        }
    }
};

• 在获取信息的时候,需要用到xhr.open('get','data/server1.json')xhr.send(null)

• 省和市的联动

  • 之后为省份的下拉列表去绑定change事件
    • 首先先将城市下拉列表的选项清空
    • 使用户能够选择省份的信息
    • 在根据用户所选择的省份信息来获取到对应的城市信息
      • 确保每一次在页面中选择的省市都是空白的
      • 判断使其获取到的server1.json里的名字等于下拉列表的名字
      • 获取到对用的城市信息
      • 将获取到的数据更新到HTML页面中

provinceElement.addEventListener("change", function () {
    // 将城市下拉列表的选项清空
    var cityOpts = cityElement.options;
    for (var k = 1; k < cityOpts.length; k++) {
    	cityElement.removeChild(cityOpts[k]);
    	k--;
    }

    // 1. 用户选择的省份信息
    var opts = provinceElement.options; // 获取指定下拉列表所有选项
    var index = provinceElement.selectedIndex; // 被选中<option>的索引值
    var opt = opts.item(index);
    var provinceName = opt.getAttribute("value");
    // 2. 根据省份信息获取对应的城市信息
    for (var i = 0; i < datas.length; i++) {
        var data = datas[i];
        var province = data.province;
        if (provinceName === province) {
            // 获取对应的城市信息
            var cities = data.cities;
            for (var j = 0; j < cities.length; j++) {
                var city = cities[j].city;
                // 将数据更新到HTML页面中
                var opt = document.createElement("option");
                opt.setAttribute("value", city);
                opt.textContent = city;
                cityElement.appendChild(opt);
            }
        }
    }
});

• 市和区的联动

  • 之后为城市的下拉列表去绑定change事件
    • 首先先将市区下拉列表的选项清空
    • 使用户能够选择城市的信息,但是要保证前面的省市联动的部分不变化
    • 在根据用户所选择的省份信息来获取到对应的市区信息
      • 确保每一次在页面中选择的市区都是空白的
      • 判断使其获取到的server1.json里的名字等于下拉列表的名字
      • 获取到对用的市区信息
      • 将获取到的数据更新到HTML页面中

cityElement.addEventListener("change", function () {
    // 将区级下拉列表的选项清空
    var countyOpts = countyElement.options;
    for (var k = 1; k < countyOpts.length; k++) {
        countyElement.removeChild(countyOpts[k]);
        k--;
    }

    // 1. 用户选择的城市信息
    var opts = cityElement.options; // 获取指定下拉列表所有选项
    var index = cityElement.selectedIndex; // 被选中<option>的索引值
    var opt = opts.item(index);
    var cityName = opt.getAttribute("value");
    // 2. 根据城市信息获取对应的区级信息
    for (var i = 0; i < datas.length; i++) {
        var cities = datas[i].cities;
        for (var x = 0; x < cities.length; x++) {
            var city = cities[x].city;
            if (cityName === city) {
                var counties = cities[x].counties;
                for (var y = 0; y < counties.length; y++) {
                    var county = counties[y];
                    // 将数据更新到HTML页面中
                    var opt = document.createElement("option");
                    opt.setAttribute("value", county);
                    opt.textContent = county;
                    countyElement.appendChild(opt);
                }
            }
        }
    }
});