技术咨询：如何获取AJAX返回的首个键对象及实现三级联动下拉框

我来帮你搞定这两个问题哈～

假设你的AJAX请求返回的是一个JSON对象（比如{ "user": { "name": "张三" }, "order": { "id": 123 } }这种结构），想要拿到第一个键对应的对象，其实很简单，分三步就能搞定：

1. 先把对象的所有键提取成数组：用Object.keys()方法，它会返回一个包含对象所有键名的数组；
2. 取数组的第一个元素，也就是第一个键；
3. 用这个键去访问原对象，就能得到对应的对象啦。

给你举个实际代码例子，不管是用jQuery的AJAX还是原生JS的fetch都适用：

jQuery AJAX示例 #

$.ajax({
  url: '你的接口地址',
  method: 'GET',
  success: function(response) {
    // 比如response是 { "product": { "id": 1, "name": "手机" }, "store": {} }
    const firstKey = Object.keys(response)[0]; // 拿到第一个键"product"
    const firstObj = response[firstKey]; // 拿到对应的对象{ "id":1, "name":"手机" }
    console.log(firstObj); // 控制台输出这个对象
  }
});

原生JS Fetch示例 #

fetch('你的接口地址')
  .then(res => res.json())
  .then(data => {
    const firstKey = Object.keys(data)[0];
    const firstObj = data[firstKey];
    console.log(firstObj);
  });

要是AJAX返回的是数组的话，那直接取response[0]就能拿到第一个元素啦，但看你说的是“第一个键对象”，应该是对象结构的情况居多～

看你给的第一个下拉框代码，我给你补全整个联动逻辑，思路就是：给每个下拉框加change事件监听，选中值变化时就发AJAX请求下一级的选项，然后动态填充到对应的下拉框里。

先补全HTML结构（假设第二个下拉框id是category_id，第三个是item_id） #

<!-- Service Id Field -->
<div class="form-group col-sm-6">
  <label for="service_id">Service:</label>
  <select name="service_id" class="form-control" required id="service_id">
    <option value="">请选择服务</option>
    <!-- 这里放初始的服务选项，比如后端渲染的 -->
    <option value="1">Web开发</option>
    <option value="2">移动应用</option>
  </select>
</div>

<!-- Category Id Field -->
<div class="form-group col-sm-6">
  <label for="category_id">分类:</label>
  <select name="category_id" class="form-control" required id="category_id">
    <option value="">请选择分类</option>
  </select>
</div>

<!-- Item Id Field -->
<div class="form-group col-sm-6">
  <label for="item_id">项目:</label>
  <select name="item_id" class="form-control" required id="item_id">
    <option value="">请选择项目</option>
  </select>
</div>

然后是JS逻辑（用jQuery示例，原生JS也能类似实现） #

$(document).ready(function() {
  // 监听第一个下拉框的选择变化
  $('#service_id').on('change', function() {
    const selectedServiceId = $(this).val();
    
    // 如果没选服务，清空后面两个下拉框
    if (!selectedServiceId) {
      $('#category_id').html('<option value="">请选择分类</option>');
      $('#item_id').html('<option value="">请选择项目</option>');
      return;
    }
    
    // 发AJAX请求获取对应分类
    $.ajax({
      url: '/api/get-categories', // 换成你的后端接口地址
      method: 'GET',
      data: { service_id: selectedServiceId }, // 把选中的服务ID传给后端
      success: function(categories) {
        // 组装分类选项
        let categoryOptions = '<option value="">请选择分类</option>';
        categories.forEach(category => {
          categoryOptions += `<option value="${category.id}">${category.name}</option>`;
        });
        // 填充到分类下拉框
        $('#category_id').html(categoryOptions);
        
        // 要是想自动选中第一个分类并触发下一级加载，可以加下面这行
        // $('#category_id').val(categories[0]?.id).trigger('change');
      },
      error: function() {
        alert('加载分类失败，请重试～');
      }
    });
  });
  
  // 监听第二个下拉框的选择变化
  $('#category_id').on('change', function() {
    const selectedCategoryId = $(this).val();
    
    if (!selectedCategoryId) {
      $('#item_id').html('<option value="">请选择项目</option>');
      return;
    }
    
    // 发AJAX请求获取对应项目
    $.ajax({
      url: '/api/get-items', // 换成你的后端接口地址
      method: 'GET',
      data: { category_id: selectedCategoryId }, // 把选中的分类ID传给后端
      success: function(items) {
        let itemOptions = '<option value="">请选择项目</option>';
        items.forEach(item => {
          itemOptions += `<option value="${item.id}">${item.name}</option>`;
        });
        $('#item_id').html(itemOptions);
      },
      error: function() {
        alert('加载项目失败，请重试～');
      }
    });
  });
  
  // 页面加载时，如果第一个下拉框有默认选中值，自动触发一次change事件初始化
  if ($('#service_id').val()) {
    $('#service_id').trigger('change');
  }
});

几个注意点： #

• 后端接口要配合好：接收service_id返回对应的分类列表，接收category_id返回对应的项目列表，数据格式建议是JSON数组（比如[{ "id": 1, "name": "前端开发" }, ...]）；
• 要是不用jQuery，换成原生JS的addEventListener绑定事件，用fetch发请求就行，逻辑是一样的；
• 可以加个加载状态，比如请求时给下拉框加个<option value="">加载中...</option>，用户体验会更好～

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