最近在练习项目时,遇到了三级联动问题,于是就在本地用JS做了一个三级联动,如有写的不对的地方,请大佬们指正出来~
1、搞清楚<select></select>标签的一些选择框脚本。
1.当选中某个option时,其selected脚本属性为true。
2.select列表的长度为长度即为<option></option>的数目和。
2、初始化列表值
HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div {
text-align: center;
display: inline;
height: 20px;
width: auto;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
<body>
<div>
<select name="provance" id="province"></select>
<select name="city" id="city"></select>
<select name="town" id="town"></select>
</div>
</body>
</html>
1.先写出可供选择列表种类的json值
let optionKinds = {
"province": {
"河北省": ['石家庄', '唐山', '邯郸', '保定', '沧州', '邢台市', '廊坊市', '承德市', '张家口', '衡水', '秦皇岛'],
"河南省": ['郑州', '开封', '洛阳', '南阳', '漯河', '许昌', '三门峡', '周口', '驻马店', '焦作', '濮阳', '安阳', '商丘', '信仰', '济源'],
"广东省": ['广州', '珠海市', '汕头', '韶关', '佛山', '江门', '江门', '河源', '江阳'],
},
"city": {
"石家庄": ['桥西区', '新华区', '长安区', '裕华区', '石家庄矿区', '路园区'],
"唐山": ['曹妃甸区', '古治区', '丰南区', '开平区', '丰润区', '路北区', '迁安市', '敦化市'],
"郑州": ['惠济区', '二七区', '管城回族区', '中原区', '金水区', '郑东新区'],
"焦作": ['解放区', '山阳区', '中站区', '马村区', '修武县', '武陟县', '温县', '博爱县', '沁阳市', '孟州市'],
"开封": ["龙亭区", '顺和回族区', '鼓楼区', '禹王台区', '祥符区']
},
};
2.初始化列表的第一个值,解决其问题为,将对象中的子元素key值,写到数组中去,方法如下
function turn_arr(oJsonArr) {
let iCount = 0;
let turn_json_arr = [];
for (key in oJsonArr) {
turn_json_arr.push(key);
}
return turn_json_arr;
}
3.初始化列表的值
function init(which_select, keyWord, which_select_son) {
let placeOption = '';
let option_arr = operation.turn_arr(optionKinds[keyWord]);
for (let i = 0; i < optionPro_arr.length; i++) {
placeOption += "<option value='" + option_arr[i] + "'>" + option_arr[i] + "</option>";
}
which_select.innerHTML = placeOption;
relevance_place(which_select, keyWord, which_select_son);//初始化与之相关联的子列表
}
function relevance_place(which_select, keyWord, which_select_son) {
let placeOption_son = '';
for (let i = 0; i < which_select.length; i++) {
if (which_select[i].selected) {
for (key in optionKinds[keyWord]) {
if (key == which_select[i].value) {
for (let i = 0; i < optionKinds[keyWord][key].length; i++) {
placeOption_son+= "<option value='" + optionKinds[keyWord][key][i] + "'>" + optionKinds[keyWord][key][i] + "</option>"
}
which_select_son.innerHTML = placeOption_son
}
}
}
}
}
init(document.getElementById('province') "province", document.getElementById('city'));
init(document.getElementById('city'), "city", document.getElementById('town'));
4.对列表选项进行监听
EventUtil.addHandler(document.getElementById('province'), 'change', function () {
relevance_place(document.getElementById('province'), "province", document.getElementById('city'));
relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));
})
EventUtil.addHandler(document.getElementById('city'), 'change', function () {
relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));
})
整个代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div { text-align: center; display: inline; height: 20px; width: auto; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> <body> <div> <select name="provance" id="province"></select> <select name="city" id="city"></select> <select name="town" id="town"></select> </div> </body> <script> let EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false) } else if (element.attachEvent) { element.attachEvent('on' + type, handler); } else { element['on' + type] = handler } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }, getEvent: function (event) { return event ? event : window.event; }, getTarget: function (event) { return event.target || event.srcElement; }, preventDefault: function (event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } } let optionKinds = { "province": { "河北省": ['石家庄', '唐山', '邯郸', '保定', '沧州', '邢台市', '廊坊市', '承德市', '张家口', '衡水', '秦皇岛'], "河南省": ['郑州', '开封', '洛阳', '南阳', '漯河', '许昌', '三门峡', '周口', '驻马店', '焦作', '濮阳', '安阳', '商丘', '信仰', '济源'], "广东省": ['广州', '珠海市', '汕头', '韶关', '佛山', '江门', '江门', '河源', '江阳'], }, "city": { "石家庄": ['桥西区', '新华区', '长安区', '裕华区', '石家庄矿区', '路园区'], "唐山": ['曹妃甸区', '古治区', '丰南区', '开平区', '丰润区', '路北区', '迁安市', '敦化市'], "郑州": ['惠济区', '二七区', '管城回族区', '中原区', '金水区', '郑东新区'], "焦作": ['解放区', '山阳区', '中站区', '马村区', '修武县', '武陟县', '温县', '博爱县', '沁阳市', '孟州市'], "开封": ["龙亭区", '顺和回族区', '鼓楼区', '禹王台区', '祥符区'] }, }; function turn_arr(oJsonArr) { let iCount = 0; let turn_json_arr = []; for (key in oJsonArr) { turn_json_arr.push(key); } return turn_json_arr; } function init(which_select, keyWord, which_select_son) { let placeOption = ''; let option_arr = turn_arr(optionKinds[keyWord]); for (let i = 0; i < option_arr.length; i++) { placeOption += "<option value='" + option_arr[i] + "'>" + option_arr[i] + "</option>"; } which_select.innerHTML = placeOption; relevance_place(which_select, keyWord, which_select_son); //初始化与之相关联的子列表 } function relevance_place(which_select, keyWord, which_select_son) { let placeOption_son = ''; for (let i = 0; i < which_select.length; i++) { if (which_select[i].selected) { for (key in optionKinds[keyWord]) { if (key == which_select[i].value) { for (let i = 0; i < optionKinds[keyWord][key].length; i++) { placeOption_son += "<option value='" + optionKinds[keyWord][key][i] + "'>" + optionKinds[ keyWord][key][i] + "</option>" } which_select_son.innerHTML = placeOption_son } } } } } init(document.getElementById('province'), "province", document.getElementById('city')); init(document.getElementById('city'), "city", document.getElementById('town')); EventUtil.addHandler(document.getElementById('province'), 'change', function () { relevance_place(document.getElementById('province'), "province", document.getElementById('city')); relevance_place(document.getElementById('city'), 'city', document.getElementById('town')); }); EventUtil.addHandler(document.getElementById('city'), 'change', function () { relevance_place(document.getElementById('city'), 'city', document.getElementById('town')); }) </script> </html>
// 整个功能代码及分析如上所示。欢迎大家留言交流讨论~~