如何根据HTML选中的分类值匹配JSON数组中对应parent_id的子分类

下面是完整的实现步骤和示例代码，一步步帮你完成需求：

1. 核心筛选逻辑 #

要从myObjArr.data数组里找出parent_id和选中值匹配的项，最直接的方法是用数组的filter()方法。这个方法会遍历数组，返回所有符合条件的元素组成的新数组。

比如，假设选中的值是'1'，筛选代码如下：

const selectedValue = '1';
const matchedItems = myObjArr.data.filter(item => {
  // 比较item的parent_id和选中值，严格相等（类型和值都一致）
  return item.parent_id === selectedValue;
});
// 此时matchedItems会是[{ id: 1, name: 'name_1', parent_id: '1' }]

注意：如果你的parent_id是数字类型（比如parent_id: 1），而select的value是字符串，记得统一类型再比较，比如：

// 把选中值转成数字
const selectedValueNum = parseInt(selectedValue);
const matchedItems = myObjArr.data.filter(item => item.parent_id === selectedValueNum);

2. 结合Select的选中事件 #

你需要给select元素绑定change事件，当用户切换选项时自动执行筛选逻辑。

完整示例代码（含HTML和JS） #

<!-- HTML部分：分类选择器和结果展示区 -->
<select id="categorySelect">
  <option value="">请选择分类</option>
  <option value="1">分类1</option>
  <option value="2">分类2</option>
  <option value="3">分类3</option>
</select>

<div id="resultContainer">
  <!-- 筛选结果会显示在这里 -->
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 你的子分类数据
const myObjArr = {
  data: [
    { id: 1, name: 'name_1', parent_id: '1' },
    { id: 2, name: 'name_2', parent_id: '2' },
    { id: 1, name: 'name_2', parent_id: '3' }
  ]
};

// 给select绑定change事件
$('#categorySelect').on('change', function() {
  // 获取选中值，用$(this).val()比你原来的写法更简洁
  const currentSelectValue = $(this).val();
  
  // 如果没有选中任何分类，清空结果并返回
  if (!currentSelectValue) {
    $('#resultContainer').html('请选择一个分类');
    return;
  }
  
  // 筛选匹配的子分类
  const matchedSubCategories = myObjArr.data.filter(item => {
    return item.parent_id === currentSelectValue;
  });
  
  // 把结果展示到页面上
  let resultHtml = '<h4>匹配的子分类：</h4><ul>';
  if (matchedSubCategories.length === 0) {
    resultHtml += '<li>没有找到匹配的子分类</li>';
  } else {
    matchedSubCategories.forEach(category => {
      resultHtml += `<li>ID: ${category.id}，名称: ${category.name}</li>`;
    });
  }
  resultHtml += '</ul>';
  
  $('#resultContainer').html(resultHtml);
});
</script>

3. 代码解释 #

• 事件绑定：$('#categorySelect').on('change', function() {...}) 监听select的选项切换事件。
• 获取选中值：$(this).val() 直接获取选中选项的value属性值，比$('option:selected', this).attr('value')更简洁高效。
• 筛选逻辑：filter()方法遍历数组，只保留parent_id等于选中值的元素。
• 结果展示：根据筛选结果生成HTML，插入到页面的结果容器中，处理了空结果的情况。

额外提示 #

• 如果你的select选项value是数字字符串，而parent_id是数字，记得用parseInt(currentSelectValue)转成数字后再比较，避免类型不匹配导致筛选失败。
• 可以根据需求调整结果的展示样式，比如用表格代替列表。

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