data.js下载：https://download.csdn.net/download/u012149969/85135218
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动-前端猫</title> </head> <body> <select name="provice"> <option value="-1">--请选择省份--</option> </select> <select name="city"> <option value="-1">--请选择城市--</option> </select> <select name="county"> <option value="-1">--请选择区域--</option> </select> </body> <script src="js/data.js"></script> <script> var provice = document.querySelector("select[name=provice]"); var city = document.querySelector("select[name=city]"); var county = document.querySelector("select[name=county]"); city.onchange = function(){ var _this = this; county.innerHTML = `<option value="-1">--请选择区域--</option>`; if(this.value/1 === -1) return; county.innerHTML += Object.keys(cityJson[this.value]).map(function (item){ return `<option value="${item}">${cityJson[_this.value][item]}</option>` }) } provice.onchange = function(){ // 通过this.value 将city中增加对应城市信息 // console.log(cityJson[this.value]); var _this = this; city.innerHTML = `<option value="-1">--请选择城市--</option>`; county.innerHTML = `<option value="-1">--请选择区域--</option>`; // 如果未选择省份，那么直接返回 if(this.value/1 === -1) return; city.innerHTML+= Object.keys(cityJson[this.value]).map(function (item){ return `<option value="${_this.value},${item}">${cityJson[_this.value][item]}</option>` }) } provice.innerHTML += Object.keys(cityJson["0"]).map(function (item){ return `<option value="0,${item}">${cityJson["0"][item]}</option>` }).join("") </script> </html>
