<!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 names = [
'黄圣飞',
'梁子聪',
'王锦双',
'韦嘉敏',
'刘雅琴',
'王鹏',
'黄华松',
'温玉秋',
'梁志斌',
'谢骐蔚',
'彭伟维',
'郑鸿生',
'文荣桩',
'陶子路',
'叶海民',
'邵将',
'郭武汉',
'王自选',
'方泽基',
'吴海波',
'黄仁杰',
'欧阳家铭',
'黄浩钊',
'汪煜博',
'赖泽赢',
'范明健',
'邱浩畅',
'李文俊',
'陈培琪',
'邓堪锦',
'张家铷',
'贺淘星',
'曾锐华',
'邓祥威',
'张澎',
'饶定洲',
'陆天豪',
'廖蓝飞',
'王汉亮',
'覃雄智',
'曾玉萍',
'周儒浩',
'马紫欣',
'肖甜',
'史溢炜',
'陈颂文',
'李龙章',
'夏一鸣',
'阳赐林',
'何富铖',
'廖东',
'韦家祥',
'王翠玲',
'吴士钊',
'付宇洋',
'林仪',
'郭倩仪',
'黎开宙',
'冯隆义',
'罗健贤',
'杨秀鸿',
'徐志军',
'李树昆',
'覃启娴',
'许龙辉',
'曹外',
'郝璐',
'康梅飞',
'陈结源',
'黄贵斌',
'刘玉轩',
'吴栩然',
'倪金辉',
'宋炜',
'李振林',
'吴卓龙',
'郭宇',
'苏铭轩',
'杨凯文',
'张祖勇',
'何冠儒',
];
const select = document.querySelector('select');
select.addEventListener('change', function () {
const length = this.value;
renderByNameLength(length);
});
function renderByNameLength(length) {
const filterList = names.filter((value) => value.length == length);
let html = '';
filterList.forEach((value) => {
html += `<li>${value}</li>`;
});
const ul = document.querySelector('ul');
ul.innerHTML = html;
}
</script>
</body>
</html>
