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
相关推荐
点赞 评论 收藏
分享
点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 牛客树洞，我想对你说 #
14882次浏览 117人参与
# 求职中的尴尬瞬间 #
6412次浏览 53人参与
# 快手技术岗信息交流阵地 #
6784次浏览 53人参与
# 牛客周边新品开箱 #
11565次浏览 91人参与
# 大学最后一个寒假，我想…… #
55102次浏览 600人参与
# 牛友的志愿填报指南 #
36278次浏览 188人参与
# 应届生被毁约被毁意向了怎么办 #
47597次浏览 280人参与
# 如何KTV领导 #
73931次浏览 505人参与
# 研究所笔面经互助 #
97598次浏览 550人参与
# 怎么给家人解释你的工作？ #
14938次浏览 87人参与
# 国企还是互联网，你怎么选？ #
172350次浏览 1305人参与
# 得物app工作体验 #
29805次浏览 69人参与
# 硬件人的春招flag #
52809次浏览 435人参与
# 机械人避雷的岗位/公司 #
29908次浏览 249人参与
# 你的mentor是什么样的人？ #
18726次浏览 119人参与
# 帮我看看，领导说这话什么意思？ #
24845次浏览 107人参与
# 打工人锐评公司红黑榜 #
175840次浏览 1023人参与
# 大疆工作体验 #
19872次浏览 85人参与
# 校招泡的最久的公司是哪家？ #
15461次浏览 92人参与
# 机械人集合！你是什么工程师？ #
21038次浏览 91人参与
# 今年形式下双非本找得到工作吗 #
239629次浏览 1435人参与