这是基础的使用方法，地名可以自己再添加，直接上代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三级联动</title> </head> <body> <select id="inne"> <option value="">请选择省</option> </select> <select id="int"> <option value="">请选择市</option> </select> <select id="inpu"> <option value="">请选择县</option> </select> <script> let data = [{ name: "河南", childer: [{ name: "开封", childer: ["杞县", "兰考", "尉氏县", "龙亭区"] }, { name: "新乡", childer: ["延津", "辉县", "原阳", "封丘", ] }, { name: "濮阳", childer: ["华龙区", "濮阳县", "油田", "核电站", ] }, { name: "郑州", childer: ["二七区", "管城回族区", "牧野区", "荥阳", ] }, { name: "平顶山", childer: ["汝州", "叶县", "石龙", ] } ] }, { name: "河北", childer: [{ name: "石家庄", childer: ["正定", "无极", "平山", "赵县", ] }, { name: "保定", childer: ["涞水县", "阜平县", "蠡县", "定兴县", ] }, { name: "唐山", childer: ["滦南县", "迁西县", "滦州市", "玉田县", ] }, { name: "衡水", childer: ["枣强县", "武强县", "阜城县", "衡水高中", ] } ] }, { name: "安徽", childer: [{ name: "合肥", childer: ["长丰", "肥东", "肥西", "庐江", ] }, { name: "蚌埠", childer: ["怀远", "五河", "固镇", ] }, { name: "淮北", childer: ["杜集", "烈山", "相山", "濉溪", ] }, { name: "淮南", childer: ["凤台", "寿县", "大通", "八公山", ] } ] } ] let inne = document.getElementById('inne'); let int = document.getElementById('int'); let inpu = document.getElementById('inpu'); for (let i = 0; i < data.length; i++) { 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>
