如何使用$.getJSON从数组中获取数据并级联填充下拉框？

没问题，我来帮你搞定这个品牌-型号的下拉框联动功能！结合你给出的Ajax接口和JSON返回格式，我整理了完整的实现代码，一步步给你拆解：

第一步：准备HTML结构 #

首先你需要两个下拉框，一个用于选择品牌，另一个用于展示对应的型号：

<select id="brand">
  <option value="">请选择品牌</option>
  <option value="0">Lenovo</option>
  <!-- 可根据实际需求添加更多品牌选项 -->
</select>

<select id="model">
  <option value="">请选择型号</option>
</select>

第二步：编写jQuery联动逻辑 #

核心思路是监听品牌下拉框的选择变化事件，当用户选中某个品牌后，用$.getJSON异步请求对应型号数据，再渲染到型号下拉框中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // 监听品牌下拉框的change事件
  $('#brand').on('change', function() {
    var brandId = $(this).val();
    var modelSelect = $('#model');
    
    // 如果未选择品牌，清空型号下拉框并返回
    if (!brandId) {
      modelSelect.empty().append('<option value="">请选择型号</option>');
      return;
    }
    
    // 发送JSON请求获取对应型号数据
    $.getJSON('http://localhost:8080/ajax/dropdown_model', { brandId: brandId }, function(data) {
      // 先清空型号下拉框
      modelSelect.empty();
      // 添加默认提示选项
      modelSelect.append('<option value="">请选择型号</option>');
      
      // 遍历返回的型号数组，逐个创建选项
      $.each(data, function(index, item) {
        // item对应返回的每个型号对象，包含id和name属性
        modelSelect.append(`<option value="${item.id}">${item.name}</option>`);
      });
    })
    .fail(function() {
      // 请求失败时的友好处理
      modelSelect.empty().append('<option value="">加载型号失败，请重试</option>');
      console.error('获取型号数据失败，请检查接口是否正常');
    });
  });
});
</script>

关键代码解释 #

• $(document).ready()：确保DOM完全加载后再执行脚本，避免找不到下拉框元素的问题。
• $('#brand').on('change', ...)：监听品牌下拉框的选择变化，触发后续逻辑。
• $.getJSON()：jQuery专门用于获取JSON数据的方法，第一个参数是接口URL，第二个是请求参数（这里传递选中的brandId），第三个是请求成功后的回调函数。
• $.each(data, ...)：遍历后端返回的型号数组，动态生成<option>元素并添加到型号下拉框中。
• .fail()：处理请求失败的场景，给用户提示同时在控制台打印错误信息，方便调试。

注意事项 #

• 确保后端接口http://localhost:8080/ajax/dropdown_model能正确接收brandId参数，并返回格式符合要求的JSON数组（和你给出的示例结构一致）。
• 如果遇到跨域问题，需要在后端配置CORS（跨域资源共享）规则，或者确保前端与后端部署在同一域名下。

这样就能完美实现你需要的下拉框联动功能啦！

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