Arthur.su
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>
查看原帖
点赞 1
相关推荐
点赞 评论 收藏
分享
腾讯HR面1998人在聊 点赞 评论 收藏
分享
点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 面试问题记录 #
17805次浏览 305人参与
# 硬件人你反向读研了吗 #
39635次浏览 608人参与
# 京东TGT #
26048次浏览 151人参与
# 硬件人秋招的第一个offer #
65419次浏览 1081人参与
# 滴滴工作体验 #
23102次浏览 123人参与
# 非技术岗投递进展 #
137511次浏览 1222人参与
# 材料进Fab厂真的劝退吗？ #
35919次浏览 158人参与
# 不考虑转正，实习多久合适 #
23923次浏览 117人参与
# 机械求职避坑tips #
40907次浏览 355人参与
# 互联网回暖，腾讯要招5000+人！ #
263481次浏览 4889人参与
# 面试经验谈 #
11699次浏览 176人参与
# 机械只有转码才有出路吗？ #
125857次浏览 1590人参与
# 职场新人生存指南 #
331184次浏览 7106人参与
# 面试吐槽bot #
2360次浏览 28人参与
# 异地恋该为对方跳槽吗 #
22676次浏览 115人参与
# 硬件人更看重稳定还是高薪 #
37860次浏览 199人参与
# vivo求职进展汇总 #
208584次浏览 1341人参与
# 25届如何提前做秋招准备？ #
163895次浏览 2451人参与
# 你遇到过哪些神仙同事 #
69206次浏览 623人参与
# 租房找室友 #
27203次浏览 143人参与
# 深信服求职进展汇总 #
188581次浏览 1694人参与