基于JSON数据与JQuery实现分类与商品项下拉选择框的联动功能

看起来你已经完成了第一步的分类下拉框填充，接下来只需要添加一个分类选择的监听事件，就能实现选中分类后自动填充对应商品到第二个下拉框的功能，下面是详细的实现步骤：

第一步：确保页面有第二个下拉框的DOM结构 #

先在HTML里准备好第二个用于展示商品项的下拉框：

<select id="items"></select>

第二步：保存分类数据到全局变量 #

为了避免每次切换分类都重复请求接口，我们可以把接口返回的全部分类数据存在全局变量里，后续直接取用：

let categoryData; // 存储所有分类及对应商品数据的全局变量
let dropdown = $('#category');
dropdown.empty();
dropdown.append('<option selected="true" disabled>Choose</option>');
dropdown.prop('selectedIndex', 0);
const url = 'http://localhost:8000/admin/categories/show';

// 填充分类下拉框并保存完整数据
$.getJSON(url, function (data) {
  categoryData = data; // 把接口返回的完整数据存起来
  $.each(data, function (key, entry) {
    dropdown.append($('<option></option>').attr('value', entry.category).text(entry.category));
  })
});

第三步：添加分类下拉框的change事件监听 #

当用户切换分类时，我们找到对应分类的商品数据，解析后填充到第二个下拉框：

// 监听分类下拉框的选择变化
$('#category').on('change', function() {
  const selectedCategory = $(this).val();
  const itemsDropdown = $('#items');
  
  // 每次切换先清空商品下拉框，添加默认提示选项
  itemsDropdown.empty();
  itemsDropdown.append('<option selected="true" disabled>Choose Item</option>');
  
  // 从全局数据中找到选中分类对应的条目
  const targetCategory = categoryData.find(item => item.category === selectedCategory);
  if (targetCategory) {
    // 注意：你的items字段是JSON字符串，需要先解析成数组
    const itemsList = JSON.parse(targetCategory.items);
    // 遍历商品项，填充下拉框
    $.each(itemsList, function(key, item) {
      itemsDropdown.append($('<option></option>').attr('value', item.value).text(item.value));
    });
  }
});

关键细节说明 #

• 全局数据复用：把接口返回的所有数据存在categoryData里，避免重复请求接口，提升页面响应速度
• JSON字符串解析：你的items字段是JSON格式的字符串（比如"[{\"value\":\"Baby Foods\"}]"），必须用JSON.parse()转换为JavaScript数组才能正常遍历
• 下拉框重置：每次切换分类时先清空商品下拉框并添加默认提示，避免残留上一次的选项

完整整合代码 #

把所有代码整合到一起，最终的JavaScript代码如下：

let categoryData;
$(document).ready(function() {
  let dropdown = $('#category');
  dropdown.empty();
  dropdown.append('<option selected="true" disabled>Choose</option>');
  dropdown.prop('selectedIndex', 0);
  const url = 'http://localhost:8000/admin/categories/show';

  // 加载并保存分类数据
  $.getJSON(url, function (data) {
    categoryData = data;
    $.each(data, function (key, entry) {
      dropdown.append($('<option></option>').attr('value', entry.category).text(entry.category));
    })
  });

  // 分类选择变化时动态加载商品项
  $('#category').on('change', function() {
    const selectedCategory = $(this).val();
    const itemsDropdown = $('#items');
    itemsDropdown.empty();
    itemsDropdown.append('<option selected="true" disabled>Choose Item</option>');
    
    const targetCategory = categoryData.find(item => item.category === selectedCategory);
    if (targetCategory) {
      const itemsList = JSON.parse(targetCategory.items);
      $.each(itemsList, function(key, item) {
        itemsDropdown.append($('<option></option>').attr('value', item.value).text(item.value));
      });
    }
  });
});

这样就能实现你想要的功能：选择第一个下拉框的分类后，第二个下拉框会自动加载并展示对应商品项啦！

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