You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.9 KiB
99 lines
3.9 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
|
|
<title>Document</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 生成的dom结构 -->
|
||
|
|
<div id="demo">
|
||
|
|
<!-- 添加内容 -->
|
||
|
|
</div>
|
||
|
|
<!-- 原生 -->
|
||
|
|
<div>
|
||
|
|
<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>
|
||
|
|
<script>
|
||
|
|
// 用于存放分类后的结果
|
||
|
|
let classify = {};
|
||
|
|
// 获取所有的option选项
|
||
|
|
let allOption = document.querySelectorAll('option')
|
||
|
|
// 遍历所有的选项，
|
||
|
|
for (let i = 0; i < allOption.length; i++) {
|
||
|
|
// 获取每一个option选项的type属性值
|
||
|
|
const type = allOption[i].getAttribute('type');
|
||
|
|
// 获取每一个option选项的value属性值
|
||
|
|
const value = allOption[i].getAttribute('value');
|
||
|
|
// 获取每一个option选项的文本内容
|
||
|
|
const text = allOption[i].innerText
|
||
|
|
// 判断是否存在该类型 不存在则置为空数组，然后才可以将同类型的数据添加进去
|
||
|
|
if (!classify[type]) {
|
||
|
|
classify[type] = [];
|
||
|
|
}
|
||
|
|
// 将每一项放入对应类型的数组
|
||
|
|
/**
|
||
|
|
* 因为每循环一次，没有option选项都有对应的type和值，示例：
|
||
|
|
* 第一次循环 type = "构建工具" value ="1" text = "Babel" 那么就是 classify["构建工具"] = [{value:1,text:'Babel'}]
|
||
|
|
* 第二次循环 type = "构建工具" value ="2" text = "Webpack" 那么就是 classify["构建工具"] = [{value:1,text:'Babel'},{value:2,text:'Webpack'}]
|
||
|
|
* .....依次类推
|
||
|
|
* 最后一次循环 type = "前端框架" value ="7" text = "Nerv" 那么就是 classify["前端框架"] = [ {value: "前端框架", text: "Vue"},
|
||
|
|
* {value: "前端框架", text: "Angular"},
|
||
|
|
* {value: "前端框架", text: "React"},
|
||
|
|
* {value: "前端框架", text: "Nerv"}]
|
||
|
|
*/
|
||
|
|
classify[type].push({
|
||
|
|
value,
|
||
|
|
text
|
||
|
|
})
|
||
|
|
}
|
||
|
|
console.log(classify)
|
||
|
|
// 动态创建下拉列表
|
||
|
|
function createElement(classify) {
|
||
|
|
// 获取最外层的容器
|
||
|
|
let wrap = document.getElementById('demo')
|
||
|
|
// 先设置内容，添加input输入框
|
||
|
|
wrap.innerHTML = "<input type'text'>"
|
||
|
|
// 遍历生成的数据
|
||
|
|
for (let [key, value] of Object.entries(classify)) {
|
||
|
|
/**
|
||
|
|
* key表示分类即： 构建工具 和前端框架
|
||
|
|
* value是分类下对应的数组
|
||
|
|
* 可以打印查看效果
|
||
|
|
*/
|
||
|
|
// console.log('key', key)
|
||
|
|
// console.log('value', value)
|
||
|
|
// 定义字符串，默认内容是分类名称
|
||
|
|
let items = `<div class="name">${key}</div>`
|
||
|
|
// 遍历数组
|
||
|
|
value.forEach(item => {
|
||
|
|
// 生成每一条内容
|
||
|
|
// console.log(item.value, item.text)
|
||
|
|
let lis = `<div value="${item.value}">${item.text}</div>`
|
||
|
|
// 拼接字符串
|
||
|
|
items += lis
|
||
|
|
})
|
||
|
|
/**
|
||
|
|
* items <div class="name">构建工具</div><div value="1">Babel</div><div value="2">Webpack</div><div value="3">Rollup</div>
|
||
|
|
* items <div class="name">前端框架</div><div value="4">Vue</div><div value="5">Angular</div><div value="6">React</div><div value="7">Nerv</div>
|
||
|
|
*/
|
||
|
|
console.log('items', items)
|
||
|
|
// 设置demo盒子的innerHTML的内容
|
||
|
|
wrap.innerHTML += items
|
||
|
|
}
|
||
|
|
}
|
||
|
|
createElement(classify)
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|