[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); } } } } });