三级联动这一功能，就是，当你选择第一个的时候然后渲染第二个下拉框，点击第二个框的时候渲染第三个下拉框
渲染省的：
function fn() { //声明一个空字符串str let str = "" //str先拼接请选择省 str += `<option value="">请选择省</option>` //for循环数据的长度 for (let i = 0; i < data.length; i++) { //拼接数据里的内容 str += `<option value="${i}">${data[i].name}</option>` } //在省的下拉框进行渲染用innerHTML sheng.innerHTML = str }
渲染市的：
给省的下拉框的值添加点击事件
//省下拉框改变事件 函数名为dart function dart(w) { if (w == '') { shi.innerHTML = `<option value="">请选择市</option>` qu.innerHTML = `<option value="">请选择区</option>` return; } console.log(w); //声明一个空字符串str let str = "" //str先拼接请选择省 str += `<option value="">请选择市</option>` //for循环数据的长度 for (let i = 0; i < data[w].child.length; i++) { //拼接数据里的内容 str += `<option value="${i}">${data[w].child[i].name}</option>` qq = data[w] } //在省的下拉框进行渲染用innerHTML shi.innerHTML = str qu.innerHTML = `<option value="">请选择区</option>` }
渲染县或区的：
给市的值添加点击事件
//市下拉框改变事件 函数名为city(arr) function city(e) { if (e == '') { qu.innerHTML = `<option value="">请选择区</option>` return; } console.log(e); //声明一个空字符串 let str = "" //str先拼接请选择市 str += `<option value="">请选择区</option>` //for循环arr的child长度 for (let i = 0; i < qq.child[e].child.length; i++) { str += `<option value="${i}">${qq.child[e].child[i]}</option>` } //拼接数据里的内容. //在市的下拉框进行渲染用innerHTML console.log(qq); qu.innerHTML = str //调用area，将当前下标的child的数据传过去 }
希望这个功能可以给大家带来有用的效果
