front-end-77
/
17-filter-大案例.html

<!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>