如何通过jQuery Ajax将API返回的JSON数据填充至HTML select字段

没问题，我来帮你搞定这个需求！用jQuery Ajax获取数据并填充到select下拉框其实很简单，我给你一步步拆解，附上完整代码示例，你直接套用到项目里就行~

1. 先准备好HTML结构 #

首先在页面里放一个空的select元素，给它加个id方便jQuery选择：

<select id="ticketTypes"></select>

2. 编写jQuery Ajax请求代码 #

接下来用$.get发起GET请求，获取数据后遍历生成option并填充到select里：

// 替换成你的实际API接口地址
const apiUrl = 'https://your-api-endpoint.com/ticket-types';

// 发起GET请求
$.get(apiUrl, function(responseData) {
  // 先清空select，避免重复加载时出现重复选项
  $('#ticketTypes').empty();

  // 遍历返回的数据，逐个创建option并添加
  $.each(responseData, function(index, optionText) {
    // 创建option元素，设置显示文本
    const option = $('<option>').text(optionText);
    // 将option添加到select中
    $('#ticketTypes').append(option);
  });
})
.fail(function() {
  // 处理请求失败的情况，给用户友好提示
  alert('获取票种数据失败，请稍后重试');
});

代码解释： #

• $.get是jQuery简化版的GET请求方法，第一个参数是API地址，第二个是请求成功后的回调函数，responseData就是API返回的数据集（这里假设返回的是字符串数组，比如["Child (between 3 - 12)", "Transport or Direct ticket", ...]）。
• 调用empty()清空select是个好习惯，防止多次请求后选项重复。
• 用$.each遍历数据数组，每次循环创建一个<option>元素，用text()设置它的显示文本，再通过append()把它添加到select里。
• .fail()方法用来捕获请求失败的情况，比如网络问题或者API报错，这里用alert提示用户，你也可以改成更美观的提示方式。

3. 如果API返回的是对象数组怎么办？ #

如果你的API返回的不是纯字符串数组，而是包含键值对的对象（比如每个票种有id和名称），比如返回数据是：

[
  {id: 1, name: "Child (between 3 - 12)"},
  {id: 2, name: "Transport or Direct ticket"},
  ...
]

那只需要稍微调整遍历的代码，给option加上value属性：

$.each(responseData, function(index, ticketItem) {
  // 创建option，同时设置value和文本
  const option = $('<option>').val(ticketItem.id).text(ticketItem.name);
  $('#ticketTypes').append(option);
});

这样后续你可以通过$('#ticketTypes').val()获取选中票种的id，更方便处理业务逻辑。

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