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
相关推荐
查看13道真题和解析 点赞 评论 收藏
分享
一个2人：我说几个点吧，你的实习经历写的让人觉得毫无含金量，你没有挖掘你需求里的 亮点， 让人觉得你不仅打杂还摆烂。然后你的简历太长了🤣你这个实习经历看完，估计没几个人愿意接着看下去， sdk， 索引这种东西单拎出来说太顶真了兄弟，好好优化下简历吧 点赞 评论 收藏
分享
11-10 22:06
上海震旦职业学院 前端工程师 
点赞 评论 收藏
分享
牛客热帖
正在热议
# 25届秋招总结 #
267444次浏览 2246人参与
# 学历or实习经历，哪个更重要 #
44028次浏览 332人参与
# 北方华创开奖 #
23821次浏览 260人参与
# 地方国企笔面经互助 #
2920次浏览 7人参与
# 你觉得专业和学校哪个对薪资影响最大 #
28362次浏览 213人参与
# 选完offer后，你后悔学本专业吗 #
13888次浏览 100人参与
# 0offer是寒冬太冷还是我太菜 #
888449次浏览 7914人参与
# 你最想要的公司福利是？ #
42315次浏览 150人参与
# 查收我的offer竞争力报告 #
20061次浏览 257人参与
# 如何一边实习一边秋招 #
987720次浏览 12610人参与
# 应届生被毁约被毁意向了怎么办 #
28398次浏览 244人参与
# 一觉醒来，我觉醒了超级打工人系统 #
3374次浏览 36人参与
# 没有实习经历，还有机会进大厂吗 #
807451次浏览 13856人参与
# 来聊聊机械薪资天花板是哪家 #
66167次浏览 447人参与
# 面试体验感最好的是哪家？ #
83784次浏览 819人参与
# 机械应届生薪资要多少才合适？ #
12557次浏览 61人参与
# 如果公司降薪，你会跳槽吗？ #
24840次浏览 236人参与
# 如何写一份好简历 #
605536次浏览 8526人参与
# 秋招OC许愿 #
228545次浏览 1881人参与
# 寒假躺平还是提前实习 #
59663次浏览 457人参与
# 你认为第一份工作重要吗 #
5467次浏览 50人参与