正在回答 回答被采纳积分+1
5回答
好帮手慕慕子
2020-08-17 19:17:56
同学你好，作业是没有源码的。因为代码很灵活，实现方式不唯一。我们鼓励大家按照自己的思路去做一做，培养自己的思维能力和编码能力。
老师这里给同学提供一个参考实现的思路：
1、html结构中原生下拉框中添加对应的value和type属性，方便分类。
2、获取原生的option元素，然后根据元素的value和type属性以及文本内容，生成数据。
3、根据生成的数据动态创建下拉列表，下拉列表内容需要全部显示出来，所以不推荐使用select下拉框实现。直接使用div实现效果即可
代码运行结果如下：
示例代码如下，同学可以测试理解下
<!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>祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星