HTML结构创建时这样吗？wrap中的p标签和第二个下拉菜单怎么写HTML结构？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="wrap">
<!-- <div>
<div class="title">自定义select</div>
<select id="demo">
<option value="1" type="构建工具">Babel</option>
<option value="2" type="构建工具">Webpack</option>
<option value="3" type="构建工具">Rollup</option>
<option value="4" type="前端框架">Vue</option>
<option value="5" type="前端框架">Angular</option>
<option value="6" type="前端框架">React</option>
<option value="7" type="前端框架">Nerv</option>
</select>
</div>
<div>
<p id="out"></p>
</div>
<div style="text-align: center;margin-top: 60px;">
<div class="title">原生select</div>
<select>
<option value="1" type="构建工具">Babel</option>
<option value="2" type="构建工具">Webpack</option>
<option value="3" type="构建工具">Rollup</option>
<option value="4" type="前端框架">Vue</option>
<option value="5" type="前端框架">Angular</option>
<option value="6" type="前端框架">React</option>
<option value="7" type="前端框架">Nerv</option>
</select>
</div> -->
</div>
<script>
const data=[
{type:'建构工具',value:'1',pid:'0'},
{type:'Bable',vlaue:'2',pid:'1'},
{type:'Webpack',value:'3',pid:'1'},
{type:'Rollup',value:'4',pid:'1'},
{type:'前端框架',value:'5',pid:'0'},
{type:'Vue',value:'6',pid:'5'},
{type:'Angular',value:'7',pid:'5'},
{type:'React',value:'8',pid:'5'},
{type:'Nerv',value:'9',pid:'5'}
];
// function Ancestry(data,p){
// let arr = [];
// function findId(data,p){
// for(let i = 0; i<data.length; i++){
// let item = data[i];
// if(item.value==p){
// arr.push(item);
// findId(data,item.pid);
// }
// }
// };
// findId(data,p);
// return arr;
// }
// console.log(Ancestry(data,1));
function getSubTree(data,id){
let son = [];
let level=0;
function findId(data,id,level){
for(let i=0; i<data.length; i++){
let item = data[i];
if(item.pid == id){
item.level = level;
son.push(item);
findId(data,item.value,level+1)
}
}
}
findId(data,id,level);
return son;
}
// console.log(getSubTree(data,0));
//创建dom
createElement = function(){
let tree = getSubTree(data,0);
let temp = [];
for (let i = 0; i<tree.length; i++){
let arr = tree[i];
temp.push( `
'<option value="1" >'+${arr.type}+'</option>'
`);
}
//html模板
let tamplate = `
<div class="title">自定义select</div>
<select id=''>${temp.join('')}</select>
`
let wrap = document.getElementById('div');
wrap.innerHTML = tamplate;
console.log(wrap.innerHTML);
// let out = document.createElement('div');
// wrap.appendChild(out);
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星