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>