JavaScript通过GET请求获取数据库数据动态填充select下拉框

你可以在typefunc()函数内拿到GET请求返回的res结果后，通过原生DOM操作完成下拉选项的填充，核心逻辑是保留默认占位选项、遍历返回数据生成<option>节点追加到下拉框中，参考代码如下：

function typefunc() {
  // 此处保留你原有的GET请求逻辑，拿到返回结果res
  // 注意：如果接口返回的是JSON字符串，需要先执行 res = JSON.parse(res) 转为JS数组再操作

  // 获取目标下拉框元素
  const typeSelect = document.getElementById('type');
  // 清除之前动态追加的选项，保留索引为0的默认"Choose..."占位项，避免重复加载时选项重复
  while (typeSelect.options.length > 1) {
    typeSelect.remove(1);
  }
  // 遍历返回的数据列表生成选项
  res.forEach(item => {
    const opt = document.createElement('option');
    // 选项显示文本对应数据里的Name字段
    opt.innerText = item.Name;
    // 选项提交值对应数据里的ID字段
    opt.value = item.ID;
    typeSelect.appendChild(opt);
  });
}

注意事项 #

• 如果你使用的是fetch/axios这类异步请求方法，一定要等响应完全返回、数据解析完成后再执行DOM追加操作，避免拿到空值报错
• 如果业务需要调整选项显示内容和提交值的对应关系，直接修改innerText和value的赋值字段即可
• 如果需要默认选中某个选项，可以在生成option时判断对应ID/Name，给符合条件的option加上selected = true属性

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