有 json 数据如下，如何用 JS 实现国，省，市三级下拉联动
{"code":"200","message":"","subCode":"","subMsg":"","resultObj":{"海外":{"丹麦":["奥胡斯","北...
{
"code": "200",
"message": "",
"subCode": "",
"subMsg": "",
"resultObj": {
"海外": {
"丹麦": [
"奥胡斯",
"北日德兰",
"博恩霍尔姆",
"菲特烈堡",
"菲茵",
"哥本哈根"
],
"乌克兰": [
"敖德萨",
"波尔塔瓦",
"第聂伯罗波得罗夫斯克",
"顿涅茨克",
"哈尔科夫"
]
},
"中国": {
"云南": [
"曲靖",
"玉溪",
"保山",
"昭通",
"丽江"
],
"内蒙古自治区": [
"包头",
"乌海",
"赤峰",
"通辽",
"鄂尔多斯"
]
}
}
} 展开
"code": "200",
"message": "",
"subCode": "",
"subMsg": "",
"resultObj": {
"海外": {
"丹麦": [
"奥胡斯",
"北日德兰",
"博恩霍尔姆",
"菲特烈堡",
"菲茵",
"哥本哈根"
],
"乌克兰": [
"敖德萨",
"波尔塔瓦",
"第聂伯罗波得罗夫斯克",
"顿涅茨克",
"哈尔科夫"
]
},
"中国": {
"云南": [
"曲靖",
"玉溪",
"保山",
"昭通",
"丽江"
],
"内蒙古自治区": [
"包头",
"乌海",
"赤峰",
"通辽",
"鄂尔多斯"
]
}
}
} 展开
1个回答
展开全部
直接js实现的话就用纯原生的，没加任何样式，代码如下：
其实如果用第三方UI库已经有相关的三级联动select框，比如vue的element UI，可以不用自己写的
<!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>三级联动</title>
</head>
<body>
<select name="domain" id="domain"></select>
<select name="country" id="country"></select>
<select name="city" id="city"></select>
</body>
<script>
let obj = {
"code": "200",
"message": "",
"subCode": "",
"subMsg": "",
"resultObj": {
"海外": {
"丹麦": [
"奥胡斯",
"北日德兰",
"博恩霍尔姆",
"菲特烈堡",
"菲茵",
"哥本哈根"
],
"乌克兰": [
"敖德萨",
"波尔塔瓦",
"第聂伯罗波得罗夫斯克",
"顿涅茨克",
"哈尔科夫"
]
},
"中国": {
"云南": [
"曲靖",
"玉溪",
"保山",
"昭通",
"丽江"
],
"内蒙古自治区": [
"包头",
"乌海",
"赤峰",
"通辽",
"鄂尔多斯"
]
}
}
}
let domain = document.getElementById('domain');
let country = document.getElementById('country');
let city = document.getElementById('city');
let domainArray = [];
let countryArray = [];
let cityArray = [];
for (item in obj.resultObj) {
domainArray.push(item);
}
for (let i = 0; i < domainArray.length; i++) { //获取一级数据
domain.innerHTML += '<option value=' + domainArray[i] + '>' + domainArray[i] + '</option>';
}
domain.onchange = () => {
// 初始化数据
let countryArray = [];
let cityArray = [];
let childs = country.childNodes;
for (var i = childs.length - 1; i >= 0; i--) {
country.removeChild(childs[i]);
}
let cityChilds = city.childNodes;
for (var i = cityChilds.length - 1; i >= 0; i--) {
city.removeChild(cityChilds[i]);
}
// ******************************
let arr = obj.resultObj[domain.value]; //取得二级数据
for (item in arr) {
countryArray.push(item);
}
for (let i = 0; i < countryArray.length; i++) {
country.innerHTML += '<option value=' + countryArray[i] + '>' + countryArray[i] + '</option>';
}
};
country.onchange = () => {
let cityArray = [];
let cityChilds = city.childNodes;
for (var i = cityChilds.length - 1; i >= 0; i--) {
city.removeChild(cityChilds[i]);
}
cityArray = obj.resultObj[domain.value][country.value]; //取得二级数据
for (let i = 0; i < cityArray.length; i++) {
city.innerHTML += '<option value=' + cityArray[i] + '>' + cityArray[i] + '</option>';
}
}
</script>
</html>
其实如果用第三方UI库已经有相关的三级联动select框，比如vue的element UI，可以不用自己写的
<!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>三级联动</title>
</head>
<body>
<select name="domain" id="domain"></select>
<select name="country" id="country"></select>
<select name="city" id="city"></select>
</body>
<script>
let obj = {
"code": "200",
"message": "",
"subCode": "",
"subMsg": "",
"resultObj": {
"海外": {
"丹麦": [
"奥胡斯",
"北日德兰",
"博恩霍尔姆",
"菲特烈堡",
"菲茵",
"哥本哈根"
],
"乌克兰": [
"敖德萨",
"波尔塔瓦",
"第聂伯罗波得罗夫斯克",
"顿涅茨克",
"哈尔科夫"
]
},
"中国": {
"云南": [
"曲靖",
"玉溪",
"保山",
"昭通",
"丽江"
],
"内蒙古自治区": [
"包头",
"乌海",
"赤峰",
"通辽",
"鄂尔多斯"
]
}
}
}
let domain = document.getElementById('domain');
let country = document.getElementById('country');
let city = document.getElementById('city');
let domainArray = [];
let countryArray = [];
let cityArray = [];
for (item in obj.resultObj) {
domainArray.push(item);
}
for (let i = 0; i < domainArray.length; i++) { //获取一级数据
domain.innerHTML += '<option value=' + domainArray[i] + '>' + domainArray[i] + '</option>';
}
domain.onchange = () => {
// 初始化数据
let countryArray = [];
let cityArray = [];
let childs = country.childNodes;
for (var i = childs.length - 1; i >= 0; i--) {
country.removeChild(childs[i]);
}
let cityChilds = city.childNodes;
for (var i = cityChilds.length - 1; i >= 0; i--) {
city.removeChild(cityChilds[i]);
}
// ******************************
let arr = obj.resultObj[domain.value]; //取得二级数据
for (item in arr) {
countryArray.push(item);
}
for (let i = 0; i < countryArray.length; i++) {
country.innerHTML += '<option value=' + countryArray[i] + '>' + countryArray[i] + '</option>';
}
};
country.onchange = () => {
let cityArray = [];
let cityChilds = city.childNodes;
for (var i = cityChilds.length - 1; i >= 0; i--) {
city.removeChild(cityChilds[i]);
}
cityArray = obj.resultObj[domain.value][country.value]; //取得二级数据
for (let i = 0; i < cityArray.length; i++) {
city.innerHTML += '<option value=' + cityArray[i] + '>' + cityArray[i] + '</option>';
}
}
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
