如何基于data-type属性实现对象数组的下拉筛选功能？

我有一个通过JavaScript动态渲染的人员对象数组，想根据下拉菜单的选中值，匹配每个对象department属性对应的data-type属性来筛选渲染的卡片。目前其他功能正常，只有if/else条件判断部分出问题，无法把下拉选中值和对象的department值关联起来。

相关代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <title>People Directory</title>
</head>
<body>
    <h1 class="page-title">Directory</h1>
    <div>
        <label for="department-type">Department</label>
        <select name="department" id="department-type">
            <option value="" disabled selected>-Any-</option>
            <option value="dean of the office">Dean of the Office</option>
            <option value="admissions">Admissions</option>
            <option value="faculty">Faculty</option>
        </select>
    </div>
    <div class="directory-container"></div>
</body>
</html>

JavaScript #

const peoples = [{
    name: 'Victor McGee',
    job: 'Dean of School',
    department: 'Dean of the office'
},
{
    name: 'Joe Pong',
    job: 'Academics',
    department: 'Admissions'
},
{
    name: 'Amy Baxter',
    job: 'Professor',
    department: 'Faculty'
}];

const renderDirectory = function(peoples) {
    peoples.forEach(function(people) {
        const card = document.createElement('div');
        card.classList = 'card-body'
        card.setAttribute('data-type', people.department);
        card.innerHTML = `
          <h5>${people.name}</h5>
          <p>${people.job}</p>
        `;  
        document.querySelector('.directory-container').appendChild(card);
    });
}

renderDirectory(peoples);

jQuery(document).ready(function($) {
  $("#department-type").on("change", function(e) {
      e.preventDefault();
      var selectedDept = $(this).children("option:selected").val();
      console.log('selected value', selectedDept);
      $(".directory-container .card-body").each(function() { 
            var department = $(this).attr("data-type");
            console.log(department)
            if(department.indexOf(selectedDept) !== -1) {
                $(this).show();
                $(this).prop('selected', true);
            } else {
                $(this).hide();
            }
      });
  });
});

问题原因及修复方案 #

核心问题 #

1. 大小写不匹配：下拉选项的value和人员对象的department值大小写不一致。比如下拉里的value="dean of the office"，而对象里的是department: 'Dean of the office'，indexOf会区分大小写，导致匹配失败。
2. 冗余代码：$(this).prop('selected', true)是下拉选项的专属属性，加到卡片上完全无效。
3. 匹配逻辑不精准：indexOf会出现部分匹配的误判，这里需要的是完全匹配。

修复后的代码 #

修改后的HTML（统一大小写）

<select name="department" id="department-type">
    <option value="" disabled selected>-Any-</option>
    <option value="Dean of the office">Dean of the Office</option>
    <option value="Admissions">Admissions</option>
    <option value="Faculty">Faculty</option>
</select>

修改后的JavaScript（优化筛选逻辑）

jQuery(document).ready(function($) {
  $("#department-type").on("change", function(e) {
      e.preventDefault();
      var selectedDept = $(this).val(); // 简化选中值获取方式
      $(".directory-container .card-body").each(function() { 
            var department = $(this).attr("data-type");
            // 完全匹配判断，同时兼容"-Any-"的显示逻辑
            if(!selectedDept || department === selectedDept) {
                $(this).show();
            } else {
                $(this).hide();
            }
      });
  });
});

额外优化建议 #

• 可以统一把department值转成小写（或大写）存储，下拉选项的value也同步统一，彻底避免大小写敏感问题。
• 渲染卡片时，用card.classList.add('card-body')替代card.classList = 'card-body'，避免覆盖原有类名。

内容的提问来源于stack exchange，提问作者Jeremy Mark