<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <!-- 省 --> <select name="" id="province"> <option value="">选择省</option> </select> <!-- 市 --> <select name="" id="city"> <option value="">选择市</option> </select> <!-- 区 --> <select name="" id="district"> <option value="">选择区</option> </select> <script> // 数组 let data = [{ id: 1, name: "河南", childer: [{ name: "开封", childer: [ "龙亭区", "顺河回族区", "鼓楼区", "祥符区" ] }, { name: "新乡", childer: [ "红旗区", "经开区", "卫滨区", "牧野区", ] }, { name: "洛阳", childer: [ "老城区", "西工区", "洛龙区", "孟津区", ] } ] }, { id: 2, name: "河北", childer: [{ name: "石家庄", childer: [ "长安区", "桥西区", "新华区", "鹿泉区", ] }, { name: "张家口", childer: [ "张北县", "康保县", "逐鹿县", "怀安县", ] }, { name: "秦皇岛市", childer: [ "海港区", "山海关区", "北戴河区", "抚宁区", ] } ] }, { id: 3, name: "北京", childer: [{ name: "朝阳区", childer: [ "双塔区", "龙城区", "朝阳县", "建平县", ] }, { name: "东城区", childer: [ "半截河街道", "邓庄街道", "永昌路街道", "祖师街道", ] } ] }, { id: 4, name: "山东", childer: [{ name: "青岛", childer: [ "市南区", "市北区", "黄岛区", "崂山区", ] }, { name: "威海", childer: [ "环翠区", "文登区", "荣成市", "乳山市", ] } ] }, { id: 5, name: "山西", childer: [{ name: "太原市", childer: [ "小店区", "迎泽区", "杏花岭区", "尖草坪区", ] }, { name: "大同市", childer: [ "阳高县", "天镇县", "广灵县", "浑源县", ] } ] }, { id: 6, name: "斗气大陆", childer: [{ name: "加玛帝国", childer: [ "云岚宗", "皇室", "炼药师工会", "米特尔家族", ] }, { name: "中州", childer: [ "丹塔", "花宗", "魂殿", "古族", ] }, ] } ] //获取每个标签 let inne = document.getElementById('province'); let int = document.getElementById('city'); let inpu = document.getElementById('district'); //循环假数据data' for (let i = 0; i < data.length; i++) { //拼接option inne.innerHTML += '<option value="' + i + '">' + data[i].name + '</option>'; } inne.onclick = function() { let tp = this.value; int.innerHTML = '<option value="">请选择市</option>'; for (let i = 0; i < data[tp].childer.length; i++) { int.innerHTML += '<option value="' + i + '">' + data[tp].childer[i].name + '</option>'; } int.onclick = function() { let ts = this.value; inpu.innerHTML = '<option value="">请选择县</option>'; for (let i = 0; i < data[tp].childer[ts].childer.length; i++) { inpu.innerHTML += '<option value="">' + data[tp].childer[ts].childer[i] + '</option>'; } } } </script> </body> </html>
