lt;!DOCTYPE htmlgt; lt;htmlg

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有点问题，我这改了一下。

查看原帖

点赞评论

09-25 00:00

已编辑

电子科技大学 Java

字节噩梦手撕难度

字节三面手撕地狱难度，撕不出来，也不让换题😇----------9.19一面（感觉是leetcode困难题）手撕扔鸡蛋（没撕出来），两个问。（1）100层楼，N层以上扔下鸡蛋会碎，只有两个鸡蛋，最少扔几次能得到N。（2）M层楼，K个鸡蛋，最少扔几次能得到N9.21二面手撕最长无重复子字符串（leetcode中等原题，滑动窗口秒）9.24三面，题如图（应该是超级困难题），好理解，很难写，输入都不知道怎么接，没撕出来。----------

球球与墩墩：这不是前端常考的对象扁平化吗，面试官像是前端出来的 const flattern = (obj) => { const res = {}; const dfs = (curr, path) => { if(typeof curr === 'object' && curr !== null) { const isArray = Array.isArray(curr); for(let key in curr) { const newPath = path ? isArray ? `${path}[${key}]` : `${path}.${key}` : key; dfs(curr[key], newPath); } } else { res[path] = curr } } dfs(obj); return res; }

查看3道真题和解析