56 Star 23 Fork 84

万少/前端77

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
17-filter-大案例.html 3.24 KB
一键复制 编辑 原始数据 按行查看 历史
万少 提交于 2022-05-13 17:35 . 优化filter案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>17-filter-大案例.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
同学姓名的长度
<select>
<option value="">请选择</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<ul></ul>
</div>
<script>
// 获取到下拉列表的值
const select = document.querySelector('select');
// 绑定change事件
select.addEventListener('change', function () {
// 获取选中的值
// console.log(this.value);
const length = this.value; // 字符串类型
// 数组 同学名称
const names = [
'黄圣飞',
'梁子聪',
'王锦双',
'韦嘉敏',
'刘雅琴',
'王鹏',
'黄华松',
'温玉秋',
'梁志斌',
'谢骐蔚',
'彭伟维',
'郑鸿生',
'文荣桩',
'陶子路',
'叶海民',
'邵将',
'郭武汉',
'王自选',
'方泽基',
'吴海波',
'黄仁杰',
'欧阳家铭',
'黄浩钊',
'汪煜博',
'赖泽赢',
'范明健',
'邱浩畅',
'李文俊',
'陈培琪',
'邓堪锦',
'张家铷',
'贺淘星',
'曾锐华',
'邓祥威',
'张澎',
'饶定洲',
'陆天豪',
'廖蓝飞',
'王汉亮',
'覃雄智',
'曾玉萍',
'周儒浩',
'马紫欣',
'肖甜',
'史溢炜',
'陈颂文',
'李龙章',
'夏一鸣',
'阳赐林',
'何富铖',
'廖东',
'韦家祥',
'王翠玲',
'吴士钊',
'付宇洋',
'林仪',
'郭倩仪',
'黎开宙',
'冯隆义',
'罗健贤',
'杨秀鸿',
'徐志军',
'李树昆',
'覃启娴',
'许龙辉',
'曹外',
'郝璐',
'康梅飞',
'陈结源',
'黄贵斌',
'刘玉轩',
'吴栩然',
'倪金辉',
'宋炜',
'李振林',
'吴卓龙',
'郭宇',
'苏铭轩',
'杨凯文',
'张祖勇',
'何冠儒',
];
// 过滤数组 名字长度
const filterList = names.filter((value) => value.length == length);
// 对数组做遍历 拼接成 li标签
let html = '';
// 模拟 指定条件
filterList.forEach((value) => {
html += `<li>${value}</li>`;
});
// 插入到 ul标签中
const ul = document.querySelector('ul');
ul.innerHTML = html;
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/ukSir/front-end-77.git
git@gitee.com:ukSir/front-end-77.git
ukSir
front-end-77
前端77
js高级第1天

搜索帮助

0d507c66 1850385 C8b1a773 1850385