如何实现基于Designation下拉框的用户数据过滤功能？

你的核心问题在于过滤逻辑没有基于存储的数组数据进行处理，而是错误地尝试显示/隐藏空的div元素。另外还有一处拼写错误导致匹配失败。以下是修正后的完整代码：

修正后的HTML #

<form>
  <h1>Please enter details</h1>
  <input id="fname" type="text" placeholder="fname" /><br />
  <textarea id="address" name="Address" placeholder="address" rows="2" cols="10"></textarea><br />
  <select id="designation" name="des" placeholder="designation">
    <!-- 修正拼写错误：Gratuate → Graduate -->
    <option value="Graduate Engineering Trainee">Graduate Engineering Trainee</option>
    <option value="Software Engineer">Software Engineer</option>
    <option value="Developer">Developer</option>
    <option value="others">others</option>
  </select><br />
  <input type="button" value="Add" onclick="insert()" />

  <select id="sel" onchange="dataOnly()">
    <option value="All">All</option>
    <option value="Graduate Engineering Trainee">Graduate Engineering Trainee</option>
    <option value="Software Engineer">Software Engineer</option>
    <option value="Developer">Developer</option>
    <option value="others">others</option>
  </select><br />
</form>

<!-- 仅保留实际用于展示数据的div -->
<div id="display"></div>

修正后的JavaScript #

var data = [];
var fnameInput = document.getElementById("fname");
var addressInput = document.getElementById("address");
var designationInput = document.getElementById("designation");
var selFilter = document.getElementById("sel");
var messageBox = document.getElementById("display");

function insert() {
  var fname = fnameInput.value.trim();
  var address = addressInput.value.trim();
  var designation = designationInput.value;

  // 简单校验输入
  if (!fname || !address) return;

  data.push({
    id: new Date().getTime(),
    fname: fname,
    address: address,
    designation: designation
  });

  clearInputs();
  // 插入后根据当前过滤条件重新渲染
  dataOnly();
}

// 单独处理清空输入框逻辑
function clearInputs() {
  fnameInput.value = "";
  addressInput.value = "";
  designationInput.value = "";
}

// 根据传入的数据集渲染页面
function renderData(filteredData) {
  var html = "";
  for (let i = 0; i < filteredData.length; i++) {
    const user = filteredData[i];
    html += `<div style="border:1px solid #ccc; padding:8px; margin:8px 0;">`;
    html += `<div><span>${user.fname}</span>&nbsp;&nbsp;<span>`;
    html += `<button type='button' onclick='deleteUser(${user.id})'>Delete</button>`;
    html += `<button type='button' onclick='editUser(${user.id})'>Edit</button>`;
    html += `</span></div>`;
    html += `<div>地址：${user.address}</div>`;
    html += `<div>职称：${user.designation}</div>`;
    html += `</div>`;
  }
  messageBox.innerHTML = html;
}

function deleteUser(id) {
  data = data.filter(user => user.id !== id);
  dataOnly();
}

// 修复编辑功能：通过ID查找用户并填充输入框
function editUser(id) {
  const user = data.find(u => u.id === id);
  if (user) {
    fnameInput.value = user.fname;
    addressInput.value = user.address;
    designationInput.value = user.designation;
  }
}

// 实现正确的过滤逻辑
function dataOnly() {
  var selectedDesignation = selFilter.value;
  let filteredData = data;

  // 若选择非"All"选项，则过滤数组
  if (selectedDesignation !== "All") {
    filteredData = data.filter(user => user.designation === selectedDesignation);
  }

  // 渲染过滤后的结果
  renderData(filteredData);
}

// 页面加载时初始化显示全部数据
dataOnly();

关键修正点 #

1. 移除无用DOM元素：删除了#all、#get等未实际使用的div，所有数据统一通过#display展示。
2. 修正拼写错误：将职称选项中的Gratuate改为Graduate，确保过滤时字符串匹配正确。
3. 重构渲染逻辑：将数据渲染与输入清空分离，renderData函数负责根据传入的数据集生成HTML。
4. 正确实现过滤：dataOnly函数根据选中的职称过滤data数组，再调用renderData展示结果。
5. 修复编辑功能：通过用户ID查找对应数据，正确填充输入框。

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