三级联动案列
程序员文章站
2024-03-22 08:10:10
...
案列分析
思路
建立核心对象
主要用到了Ajax异步交互数据
客户端创建Ajax核心对象，和服务器进行连接及交互数据，如下：
//1、创建XMLTHttpRequest对象
var xml=createXMLHttpRequest()
//2、调用XMLHttpRequest对象的open（）方法
//与服务器建立连接
xml.open('get','xxxxxxxxx')
//3、监听事件
xml.onreadystatechange=()=>{
//xxxxxx
//数据交互过程中需要将json字符串转为json对象
}
//4、发送数据(get方法没有请求体，所以传送null数据)
xml.send(null)
联动思想
1、获取到各个选项框（利用dom操作）
2、通过Ajax对象建立和服务器中JSON数据的连接
3、获取到的Json数据的省份名称，添加到选项文本节点中
4、同时为用户所选择的省份选项框设置onchange事件用来监听，从而用来修改对应的下一个市级选项框
5、获取用户当前点击省份选项框的文本节点内容，查找JSON数据中对应的省市区级关系
6、将找到对应关系的json数据内容，动态创建选项框并添加到对应的市级选项框文本节点中
//以上是二级联动思想，而三级联动便是俩个二级联动构成
//可以说是，省级选项框和市级选项框绑定，而市级选项框和区级选项框绑定
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三级联动</title>
</head>
<body>
<!-- 三级联动 - 是两个二级联动-->
<select name="sheng" id="province">
<option value="">----</option>
</select>
<select name="shi" id="city">
<option value="">-----</option>
</select>
<select name="qu" id="counties">
<option value="">-----</option>
</select>
<script>
// ----获取省份、城市下拉列表-----
var provinceElement = document.getElementById('province')
var cityElement = document.getElementById('city')
var datas;
// ------当页面加载完毕后，动态获取省份信息----
//创建xml服务
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页面当中-----
//创建opt选项
var opt = document.createElement('option')
//设置属性value，与之对应的省份
opt.setAttribute('value',province);
//设置选项的文本节点
opt.textContent = province;
//将opt选型加入指定省份中
provinceElement.appendChild(opt)
}
}
}
//连接服务器
xhr.open('get','server.json');
//发送空数据
xhr.send(null);
//为省份下拉列表绑定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; //被选中<option>的索引值
//获取当前opt的索引值
var opt = opts.item(index);
//获取当前选项的名字
var provinceName = opt.getAttribute('value');
// 2. 根据当前获取的省份信息来获取对应的城市信息
for (var i = 0; i < datas.length; i++){
data = datas[i];
//获取当前的省份
var province = data.province;
//判断选择的省份是否和json数据中的相同，进行查找对应的值
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)
}
}
}
})
//创建xml对象的方法
function createXMLHttpRequest() {
var httpRequest;
if (window.XMLHttpRequest) { //适用于Chrome，Firefox，Safari，...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { //适用于IE浏览器
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP") // IE 7+
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP") // 6-
} catch (e) { }
}
}
return httpRequest;
}
</script>
</body>
</html>