三级联动案例
-
首先写一个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": ["二道区", "河东区", "高新区"] } ] } ]
-
然后用Ajax动态获取JSON文件中的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>三级联动</title> </head> <body> <!-- 三级联动 - 两个二级联动 --> <select id="province"></select> <select id="city"> <option value="">---</option> </select> <select id="county"> <option value="">---</option> </select> <script src="../js/createXMLHttpRequest.js"></script> <script> // 获取省份下拉列表 var provinceElement = document.getElementById("province"); // 1. 当页面加载完毕后,动态获取省份信息 var xhr = createXMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 得到服务器端返回的数据 var response = xhr.responseText; // 将JSON字符串转换成JSON对象 var datas = JSON.parse(response); // console.log(data); for (var i = 0; i < datas.length; i++) { // console.log(datas[i]); var data = datas[i]; var province = data.province; // console.log(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); </script> </body> </html>
效果如下
-
为省份下拉列表绑定change事件
provinceElement.addEventListener("change", function () { });
-
HTMLSelectionElement
HTMLSelectElement
接口表示一个<select>
HTML 元素。这个元素也通过HTMLElement
接口从其他 HTML 元素共享所有属性和方法。-
只读属性。返回当前select元素包括option元素对象的集合。
-
HTMLSelectElement.selectedIndex
此属性返回一个长整型数值,代表第一个被选中的option元素,-1代表没有元素被选中。
-
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三级联动</title>
</head>
<body>
<!-- 三级联动 - 两个二级联动 -->
<select id="province"></select>
<select id="city">
<option value="">---</option>
</select>
<select id="county">
<option value="">---</option>
</select>
<script src="../js/createXMLHttpRequest.js"></script>
<script>
// 获取省份下拉列表
var provinceElement = document.getElementById("province");
// 1. 当页面加载完毕后,动态获取省份信息
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 得到服务器端返回的数据
var response = xhr.responseText;
// 将JSON字符串转换成JSON对象
var datas = JSON.parse(response);
// console.log(data);
for (var i = 0; i < datas.length; i++) {
// console.log(datas[i]);
var data = datas[i];
var province = data.province;
// console.log(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事件
provinceElement.addEventListener("change", function () {
// 1. 用户选择的省份信息
var opts = provinceElement.options;
console.log(opts);
});
</script>
</body>
</html>
当我更换省份时,会触发change事件,这时输出一个HTMLOptionCollection集合
这个selectedIndex就是当前所选中省份的索引值
只需使用item()方法即可获取当前所选中的 <select>
元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三级联动</title>
</head>
<body>
<!-- 三级联动 - 两个二级联动 -->
<select id="province"></select>
<select id="city">
<option value="">---</option>
</select>
<select id="county">
<option value="">---</option>
</select>
<script src="../js/createXMLHttpRequest.js"></script>
<script>
// 获取省份下拉列表
var provinceElement = document.getElementById("province");
// 1. 当页面加载完毕后,动态获取省份信息
var xhr = createXMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 得到服务器端返回的数据
var response = xhr.responseText;
// 将JSON字符串转换成JSON对象
var datas = JSON.parse(response);
// console.log(data);
for (var i = 0; i < datas.length; i++) {
// console.log(datas[i]);
var data = datas[i];
var province = data.province;
// console.log(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事件
provinceElement.addEventListener("change", function () {
// 1. 用户选择的省份信息
var opts = provinceElement.options;
// console.log(opts);
var index = provinceElement.selectedIndex; // 被选中<option>的索引值
var opt = opts.item(index);
console.log(opt);
});
</script>
</body>
</html>
-
二级联动,把省份对应的城市信息在第二个
<select>
中显示<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>三级联动</title> </head> <body> <!-- 三级联动 - 两个二级联动 --> <select id="province"></select> <select id="city"> <option value="">---</option> </select> <select id="county"> <option value="">---</option> </select> <script src="../js/createXMLHttpRequest.js"></script> <script> // 获取省份、城市下拉列表 var provinceElement = document.getElementById("province"); var cityElement = document.getElementById("city"); var datas; // 1. 当页面加载完毕后,动态获取省份信息 var xhr = createXMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 得到服务器端返回的数据 var response = xhr.responseText; // 将JSON字符串转换成JSON对象 datas = JSON.parse(response); // console.log(data); for (var i = 0; i < datas.length; i++) { // console.log(datas[i]); var data = datas[i]; var province = data.province; // console.log(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事件 provinceElement.addEventListener("change", function () { // 1. 用户选择的省份信息 var opts = provinceElement.options; // 获取指定下拉列表所有选项 // console.log(opts); var index = provinceElement.selectedIndex; // 被选中<option>的索引值 var opt = opts.item(index); console.log(opt); var provinceName = opt.getAttribute("value"); // console.log(province); // 2. 根据省份信息获取对应的城市信息 for (var i = 0; i < datas.length; i++) { var data = datas[i]; var province = data.province; if (provinceName === province) { // 获取对应的城市信息 var cities = data.cities; // console.log(cities); for (var j = 0; j < cities.length; j++) { var city = cities[j].city; // console.log(city); // 将数据更新到HTML页面中 var opt = document.createElement("option"); opt.setAttribute("value", city); opt.textContent = city; cityElement.appendChild(opt); } } } }); </script> </body> </html>
但是当我选择了辽宁省,再选山东省之后,出现辽宁省的城市还在,也就是说,没有删除
我们需要删除其他省份的城市
因为cityOpts.length要删除数据,那删了之后下一次的cityOpts.length的长度就比上一次的长度少一,也就是说,cityOpts.length的长度的动态变化的,所以最后要写一个k–,跟着cityOpts.length的长度对应的减小即可。
// 将城市下拉列表的选项清空
var cityOpts = cityElement.options;
for (var k = 1; k < cityOpts.length; k++) {
cityElement.removeChild(cityOpts[k]);
k--;
}
实现效果如下
-
三级联动完整案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>三级联动</title> </head> <body> <!-- 三级联动 - 两个二级联动 --> <select id="province"> <option value="">---</option> </select> <select id="city"> <option value="">---</option> </select> <select id="county"> <option value="">---</option> </select> <script src="../js/createXMLHttpRequest.js"></script> <script> // 获取省份、城市下拉列表 var provinceElement = document.getElementById("province"); var cityElement = document.getElementById("city"); var countyElement = document.getElementById("county"); var datas; // 1. 当页面加载完毕后,动态获取省份信息 var xhr = createXMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 得到服务器端返回的数据 var response = xhr.responseText; // 将JSON字符串转换成JSON对象 datas = JSON.parse(response); // console.log(data); for (var i = 0; i < datas.length; i++) { // console.log(datas[i]); var data = datas[i]; var province = data.province; // console.log(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事件 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; // 获取指定下拉列表所有选项 // console.log(opts); var index = provinceElement.selectedIndex; // 被选中<option>的索引值 var opt = opts.item(index); // console.log(opt); var provinceName = opt.getAttribute("value"); // console.log(provinceName); // 2. 根据省份信息获取对应的城市信息 for (var i = 0; i < datas.length; i++) { var data = datas[i]; var province = data.province; if (provinceName === province) { // 获取对应的城市信息 var cities = data.cities; // console.log(cities); for (var j = 0; j < cities.length; j++) { var city = cities[j].city; // console.log(city); // 将数据更新到HTML页面中 var opt = document.createElement("option"); opt.setAttribute("value", city); opt.textContent = city; cityElement.appendChild(opt); } } } }); // 为城市下拉列表绑定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; // 获取指定下拉列表所有选项 // console.log(opts); var index = cityElement.selectedIndex; // 被选中<option>的索引值 var opt = opts.item(index); // console.log(opt); var cityName = opt.getAttribute("value"); // console.log(cityName); // 2. 根据城市信息获取对应的区级信息 for (var i = 0; i < datas.length; i++) { var cities = datas[i].cities; // console.log(cities); for (var x = 0; x < cities.length; x++) { var city = cities[x].city; // console.log(city); if (cityName === city) { var counties = cities[x].counties; // console.log(counties); for (var y = 0; y < counties.length; y++) { var county = counties[y]; // console.log(county); // 将数据更新到HTML页面中 var opt = document.createElement("option"); opt.setAttribute("value", county); opt.textContent = county; countyElement.appendChild(opt); } } } } }); </script> </body> </html>