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有点问题，我这改了一下。
查看原帖
点赞 评论
查看5道真题和解析
快手公司福利 223人发布 牛客热帖
正在热议
# 25届秋招总结 #
267216次浏览 2240人参与
# 学历or实习经历，哪个更重要 #
44003次浏览 332人参与
# 北方华创开奖 #
23812次浏览 260人参与
# 地方国企笔面经互助 #
2912次浏览 7人参与
# 你觉得专业和学校哪个对薪资影响最大 #
28351次浏览 213人参与
# 选完offer后，你后悔学本专业吗 #
13869次浏览 99人参与
# 0offer是寒冬太冷还是我太菜 #
888416次浏览 7914人参与
# 你最想要的公司福利是？ #
42297次浏览 150人参与
# 查收我的offer竞争力报告 #
20051次浏览 257人参与
# 如何一边实习一边秋招 #
987713次浏览 12610人参与
# 应届生被毁约被毁意向了怎么办 #
28390次浏览 244人参与
# 一觉醒来，我觉醒了超级打工人系统 #
3373次浏览 36人参与
# 没有实习经历，还有机会进大厂吗 #
807422次浏览 13856人参与
# 来聊聊机械薪资天花板是哪家 #
66154次浏览 447人参与
# 面试体验感最好的是哪家？ #
83772次浏览 819人参与
# 机械应届生薪资要多少才合适？ #
12555次浏览 61人参与
# 如果公司降薪，你会跳槽吗？ #
24838次浏览 236人参与
# 如何写一份好简历 #
605528次浏览 8526人参与
# 秋招OC许愿 #
228520次浏览 1881人参与
# 寒假躺平还是提前实习 #
59649次浏览 457人参与
# 你认为第一份工作重要吗 #
5467次浏览 50人参与