使用js写的三级联动 有两个城市：河南，广东；
HTML部分 写一个框架 通过js渲染 就可以不用HTML的内容。
<body> <select class="sheng" onchange="province()"> <option class="dart">-请选择省-</option> </select> <select class="shi" onchange="town()"> <option class="city" placeholder="请选择市">-请先选择省-</option> <!-- <option value="安阳">安阳</option> <option value="新乡">新乡</option> <option value="洛阳">洛阳</option> --> </select> <select class="xian"> <option class="area" placeholder="请选择县">-请先选择省-</option> <!-- <option value="文峰区">文峰区</option> <option value="北关区">北关区</option> <option value="殷都区">殷都区</option> <option value="龙安区">龙安区</option> --> </select> <script src="js/index.js"></script> </body>
CSS部分
<style> select { width: 20%; height: 25px; margin: 20px; } </style>
json假数据部分
[{ "dart": "河南省", "child": [{ "city": "安阳市", "child": [{ "area": "文峰区" }, { "area": "北关区" }, { "area": "殷都区" }, { "area": "龙安区" }] }, { "city": "新乡市", "child": [{ "area": "新乡县" }, { "area": "延津县" }, { "area": "原阳县" }, { "area": "封丘县" }, { "area": "长垣县" }] }, { "city": "洛阳市", "child": [{ "area": "洛龙区" }, { "area": "偃师市" }, { "area": "汝阳县" }, { "area": "吉利区" }, { "area": "新安县" }] }] }, { "dart": "广东省", "child": [{ "city": "广州市", "child": [{ "area": "海珠" }, { "area": "荔湾" }, { "area": "天河" }, { "area": "白云" }] }, { "city": "深圳市", "child": [{ "area": "宝安" }, { "area": "龙岗" }, { "area": "龙华" }, { "area": "坪山" }, { "area": "南山" }] }] }]
JS部分 代码及伪代码
// let声明变量为总数据 let data; // 创建新的XMLHttpRequest（可扩展超文本传输请求）对象 let xhr = new XMLHttpRequest(); // 使用open方法指定要请求的地址 路径 类型及方式 xhr.open('get', 'js/index.json', true); // 发送数据 xhr.send(); // 绑定onreadystatechange（定义响应执行函数）事件，判断readyState和status的状态 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 响应文本（返回的数据） let text = xhr.responseText; console.log(text); // 接收数据，通过 json 转换使用 把json数据转化为数据或对象 data = JSON.parse(text); console.log(data); // 渲染函数 item(data); } }; // 获取到省 市 县的数据 let声明新的变量 在文档中通过类名获取数据 let sheng = document.getElementsByClassName('sheng')[0]; console.log(sheng); let shi = document.getElementsByClassName('shi')[0]; console.log(shi); let xian = document.getElementsByClassName('xian')[0]; console.log(xian); // 省级数据渲染 function item(data) { console.log(data); // 初始化一个字符串 str，值为 "-请选择省-" let str = `<option class="city" >-请选择省-</option>`; // 遍历数组 for (let i = 0; i < data.length; i++) { console.log(data[i]); // 拼接第一个输入框内容 将dart的数据添加到str中 str += ` <option value="${i}">${data[i].dart}</option>`; } // 渲染数据 sheng.innerHTML = str; }; // 市级数据渲染 function province() { console.log(sheng.value); // 初始化一个字符串 stre，值为 "-请选择市-" let stre = `<option class="city" >-请选择市-</option>`; // 初始化一个字符串 stres，值为 "-请先选择市-" let stres = `<option class="area" >-请先选择市-</option>`; // for循环遍历数据 对于 data[sheng.value].child 中的每一个子元素： for (let i = 0; i < data[sheng.value].child.length; i++) { //将子元素的 city 添加到 stre 中，作为 option 标签的值和文本 stre += `<option value="${i}">${data[sheng.value].child[i].city}</option>`; console.log(data[sheng.value].child[i]); }; // 重新渲染stre的数据 shi.innerHTML = stre; // 重新渲染stres的数据 xian.innerHTML = stres; }; // 县级数据渲染 function town() { // 初始化一个字符串 stres，值为 "-请选择县-" let stres = `<option class="area" >-请选择县-</option>`; // 对于 data[sheng.value].child[shi.value].child 中的每一个子元素： for (let i = 0; i < data[sheng.value].child[shi.value].child.length; i++) { console.log(data[sheng.value].child[shi.value].child[i].area); // 将子元素的 area 添加到 stres 中，作为 option 标签的值和文本 stres += `<option value="area">${data[sheng.value].child[shi.value].child[i].area}</option>`; } // 重新渲染stres的数据 xian.innerHTML = stres; };
河南，广东三级联动完成
