Mr.VIP
2018-09-21 18:01 河南科技大学 前端工程师
关注
<!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": "象山县"
}]
}
]
}]
window.onload = function () {
var div = document.createElement('div');
var option = "";
var val = "";
var select1 = document.createElement("select");
var select2 = document.createElement("select");
var select3 = document.createElement("select");
select1.setAttribute("id", "select1");
select2.setAttribute("id", "select2");
select3.setAttribute("id", "select3");
select1.innerHTML = "<option> --请选择-- </option>";
select2.innerHTML = "<option> --请选择-- </option>";
select3.innerHTML = "<option> --请选择-- </option>";
div.appendChild(select1);
div.appendChild(select2);
div.appendChild(select3);
for (var i = 0; i < data.length; i++) {
option = document.createElement('option');
option.setAttribute("value", data[i].name);
option.innerHTML = data[i].name;
select1.appendChild(option);
}
document.body.appendChild(div);
select1.addEventListener('change', changeSelect1);
select2.addEventListener('change', changeSelect2);
function changeSelect1(e) {
select2.options.length = 1;
select3.options.length = 1;
val = e.target.value;
for (var i = 0; i < data.length; i++) {
if (data[i].name === val) {
for (var j = 0; j < data[i].items.length; j++) {
option = document.createElement('option');
option.setAttribute("value", data[i].items[j].name);
option.innerHTML = data[i].items[j].name;
select2.appendChild(option);
}
break;
}
}
}
function changeSelect2(e) {
select3.options.length = 1;
var val2 = e.target.value;
for (var i = 0; i < data.length; i++) {
if (data[i].name === val) {
for (var j = 0; j < data[i].items.length; j++) {
if (data[i].items[j].name === val2) {
for (var z = 0; z < data[i].items[j].items.length; z++) {
option = document.createElement('option');
option.setAttribute("value", data[i].items[j].items[z].name);
option.innerHTML = data[i].items[j].items[z].name;
select3.appendChild(option);
}
break;
}
}
break;
}
}
}
}
</script>
</head>
<body>
</body>
</html>
这个题目可以用你的方法，但是如果选项多起来了，就有点麻烦了。可以用上面我写的这个方法，用遍历更好，我用的是creatElement的方式添加option，还有就是题目那个JSON有点问题，我这改了一下。
查看原帖
点赞 评论
相关推荐
DJ懒羊羊大王：你把复旦大学写上去啊，写，本科，复旦大学，加大加粗，让hr一拿到你的简历就能一眼看到这六个字，其余的不重要 点赞 评论 收藏
分享
点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 面试问题记录 #
20595次浏览 346人参与
# 硬件人你反向读研了吗 #
40193次浏览 608人参与
# 京东TGT #
28469次浏览 151人参与
# 硬件人秋招的第一个offer #
65955次浏览 1081人参与
# 滴滴工作体验 #
23670次浏览 123人参与
# 非技术岗投递进展 #
137579次浏览 1222人参与
# 材料进Fab厂真的劝退吗？ #
36442次浏览 158人参与
# 不考虑转正，实习多久合适 #
24506次浏览 118人参与
# 机械求职避坑tips #
41411次浏览 355人参与
# 互联网回暖，腾讯要招5000+人！ #
263545次浏览 4889人参与
# 面试经验谈 #
13427次浏览 200人参与
# 机械只有转码才有出路吗？ #
125904次浏览 1590人参与
# 职场新人生存指南 #
333212次浏览 7143人参与
# 面试吐槽bot #
2636次浏览 32人参与
# 异地恋该为对方跳槽吗 #
23919次浏览 119人参与
# 硬件人更看重稳定还是高薪 #
39068次浏览 203人参与
# vivo求职进展汇总 #
208623次浏览 1341人参与
# 25届如何提前做秋招准备？ #
163958次浏览 2451人参与
# 你遇到过哪些神仙同事 #
69742次浏览 623人参与
# 租房找室友 #
28017次浏览 146人参与
# 深信服求职进展汇总 #
188891次浏览 1694人参与