如何使用JavaScript结合Ajax填充select下拉框选项

问题场景 #

开发中发起Ajax请求获取产品类型数据时，遇到无法给select标签填充选项的问题。页面存在5个结构完全相同、作用为选择产品类型的select下拉框。

现有代码 #

select标签结构：

<select class="form-control" name="type" id="select-types">
</select>

现有Ajax请求代码：

function getTypes() {
 $.ajax({
      url: `/types/json`
  }).done(function(res){
    console.log(res)
})}

接口返回数据结构：
{types: [{"id":1,"name": "Name"}, ...]}

待解决问题 #

• 如何仅定位并填充多个相同select中的最后一个？
• 如何正确将接口返回的数据填充为select的选项？

实现方法 #

1. 定位最后一个目标select #

HTML规范要求id属性在页面内唯一，多个重复元素共用同一个id会导致选择器匹配异常，建议移除重复的id="select-types"属性，通过name属性选择元素，再用jQuery的.last()方法取最后一个节点即可：

// 取所有name为type的select中的最后一个
const $targetSelect = $('select[name="type"]').last();

2. 填充select选项 #

在Ajax请求的成功回调中，先清空select原有内容避免重复追加，再遍历接口返回的类型数组，逐个生成option节点插入即可，可根据需要增加默认空选项。
完整修改后的代码：

function getTypes() {
  $.ajax({
    url: `/types/json`
  }).done(function(res){
    const $targetSelect = $('select[name="type"]').last();
    // 清空原有选项
    $targetSelect.empty();
    // 新增默认提示选项（可按需删除）
    $targetSelect.append('<option value="">请选择产品类型</option>');
    // 遍历数据生成选项
    res.types.forEach(function(type) {
      $targetSelect.append(`<option value="${type.id}">${type.name}</option>`);
    });
  })
}

注意：如果填充失败，先在回调中打印res.types确认接口返回的数组结构正常，若返回的是字符串格式JSON，需要先用JSON.parse(res)转成对象再操作。

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