方法比较笨，但能实现 lt;!DOCTYPE htmlgt; lt;ht

2018-09-07 11:28 南昌航空大学前端工程师

关注

方法比较笨，但能实现 <!DOCTYPE html> <html> <head> <meta charset=”utf-8”> <title>题目</title> <meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no”> <script> var data=[{name:'北京',items:[{name:'北京',items:[{name:'东城区'},{name:'西城区'}]}]},{name:'浙江',items:[{name:'杭州',items:[{name:'上城区'},{name:'桐庐县'}]},{name:'宁波',items:[{name:'象山县'}]}]}] // 要求：实现省市区三级下拉联动 // 初始的select需要使用js通过数据构建，数据结构使用上方data变量中的结构，无需考虑页面样式，实现功能即可 // 填充代码在下方 window.onload=function createSelect(){ var str=""; str+="<select id='select1'></select>"; str+="<select id='select2'></select>"; str+="<select id='select3'></select>"; var div=document.createElement("div"); div.innerHTML=str; document.body.appendChild(div); selectEvent(); } function selectEvent(){ var s1=document.getElementById("select1"); var s2=document.getElementById("select2"); var s3=document.getElementById("select3"); s1.addEventListener("change",s2change); s2.addEventListener("change",s3change); var str="<option>--请选择--</option>"; s1.innerHTML=str+"<option value='"+data[0].name+"'>"+data[0].name+"</option>"+"<option value='"+data[1].name+"'>"+data[1].name+"</option>"; s2.innerHTML=str; s3.innerHTML=str; function s2change(ev){ s3.options.length=1; if(ev.target.value==data[0].name) s2.innerHTML=str+"<option value='"+data[0].items[0].name+"'>"+data[0].items[0].name+"</option>"; else if(ev.target.value==data[1].name) s2.innerHTML=str+"<option value='"+data[1].items[0].name+"'>"+data[1].items[0].name+"</option>"+"<option value='"+data[1].items[1].name+"'>"+data[1].items[1].name+"</option>"; } function s3change(ev){ s3.options.length=1; if(ev.target.value==data[0].items[0].name) s3.innerHTML=str+"<option>"+data[0].items[0].items[0].name+"</option>"+"<option>"+data[0].items[0].items[1].name+"</option>"; else if(ev.target.value==data[1].items[0].name) s3.innerHTML=str+"<option>"+data[1].items[0].items[0].name+"</option>"+"<option>"+data[1].items[0].items[1].name+"</option>"; else if(ev.target.value==data[1].items[1].name) s3.innerHTML=str+"<option>"+data[1].items[1].items[0].name; } } </script> </head> <body> </body> </html>

牛客热帖