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
相关推荐
曼迪匹艾公司福利 121人发布
牛客85586392...：就团子这base 拉完了还top 点赞 评论 收藏
分享
点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 你小心翼翼的闯过多大的祸？ #
4115次浏览 69人参与
# 找不到实习会影响秋招吗 #
1399946次浏览 13635人参与
# 实习没事做是福还是祸？ #
4535次浏览 68人参与
# 重来一次，你会对开始求职的自己说 #
957次浏览 19人参与
# 2025年终总结 #
134899次浏览 2298人参与
# 考研人，我有话说 #
156631次浏览 1211人参与
# 哪些公司笔/面试难度大？ #
7087次浏览 32人参与
# 实习简历求拷打 #
24374次浏览 250人参与
# 你觉得现在还能进互联网吗？ #
29970次浏览 201人参与
# 携程工作体验 #
18963次浏览 66人参与
# 大厂VS公务员你怎么选 #
69155次浏览 638人参与
# 扒一扒那些奇葩实习经历 #
140203次浏览 1149人参与
# 找不到好工作选择GAP真的丢人吗 #
93734次浏览 1007人参与
# 那些我实习了才知道的事 #
253157次浏览 1785人参与
# 非技术投递记录 #
672986次浏览 6821人参与
# 机械求职避坑tips #
81098次浏览 531人参与
# 投格力的你，拿到offer了吗？ #
155028次浏览 829人参与
# 第一份工作能做外包吗？ #
94096次浏览 599人参与
# 作业帮求职进展汇总 #
85534次浏览 559人参与
# 秋招遇到的奇葩面试题 #
101275次浏览 416人参与