[Ajax] 案例 -- 三级联动
案例 – 三级联动
什么是三级联动呢?
三个级别，联动代表这三个级别相互依赖与嵌套，唯有这样才能实现三级联动.
三级联动简单理解可以理解为两个二级联动,
- 只有点击
省才能出现下一级的市
![[Ajax] 案例 -- 三级联动_第1张图片](http://img.e-com-net.com/image/info8/c38a20b1c014429d87727eb1005ce881.gif)
- 只有点击
市才能出现下一级的区
![[Ajax] 案例 -- 三级联动_第2张图片](http://img.e-com-net.com/image/info8/a770037bdb1643cbbf384a6e09dea953.gif)
在正式写之前,要先了解一下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": ["二道区", "河东区", "高新区"]
}
]
}
]
三级联动,肯定要有三个选择列表,所以,先创建三个
,为之后的能够点击省市区县的选择列表做准备,命名为'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页面中
- 之后为省份的下拉列表去绑定change事件
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; // 被选中
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页面中
- 之后为城市的下拉列表去绑定change事件
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; // 被选中
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);
}
}
}
}
});