1.先搭建html的结构
<body> <select id="inne"> <option value="">请选择省</option> </select> <select id="int"> <option value="">请选择市</option> </select> <select id="inpu"> <option value="">请选择县</option> </select> </body>
2.这里先给大家写一个假数据
let data = [{ id: 1, name: "河南", childer: [{ name: "开封", childer: [ "开封1", "开封2", "开封3", "开封4" ] }, { name: "新乡", childer: [ "新乡1", "新乡2", "新乡3", "新乡4", ] } ] }, { id: 2, name: "河北", childer: [{ name: "石家庄", childer: [ "石家庄1", "石家庄2", "石家庄3", "石家庄4", ] }, { name: "衡水", childer: [ "衡水1", "衡水2", "衡水3", "衡水4", ] } ] } ]
3.下面就是js了
//获取每个标签 let inne = document.getElementById('inne'); let int = document.getElementById('int'); let inpu = document.getElementById('inpu'); //循环假数据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>'; } } }
