jQuery无法获取Axios异步设置选中的select下拉框选中值问题

问题原因 #

1. 异步请求时序不匹配 #

Axios发送的是异步网络请求，调用getOutsourcerManagerName后，代码不会等待接口返回结果就会继续往下执行。如果你在接口响应回来、下拉框选项渲染完成前就调用了取值函数，此时下拉框还没完成赋值，拿到的自然是空值。

2. 选中属性逻辑编写错误 #

你已经通过变量selected判断了当前选项是否需要选中，但在拼接option标签时没有用到该变量，反而给所有option都硬编码了selected属性；同时你最开头插入的空值option也带有selected属性。同一个select下存在多个带selected属性的option时，浏览器默认会选中第一个带该属性的选项，也就是你插入的空值option，所以即使接口渲染完成后取值也会是空。

修复方案 #

1. 修正option拼接的选中逻辑，去掉硬编码的selected属性，改用你预先计算的selected变量
2. 调整取值函数的调用时机，确保在下拉框渲染完成后再调用
3. （可选）如果不需要默认空选项，可以去掉开头插入的空值option，或者去掉它的selected属性

修正后的自动设置下拉框代码示例 #

function getOutsourcerManagerName(){
  return axios.get(`/admin/ses/getManagersOutsourcer/${@json($ses->outsourcer)}`).then((res)=>{
      console.log(res)
      var manager = res.data
      $("#outsourcer_manager_name").empty()
      // 如果不需要默认空选中可以去掉这里的selected
      $("#outsourcer_manager_name").append("<option value=''></option>");
      $("#outsourcer_division").val("")
      $("#outsourcer_department").val("")
      $("#outsourcer_tel").val("")
      $("#outsourcer_zip").val("")
      $("#outsourcer_address1").val("")
      $("#outsourcer_address2").val("")
      for (let i = 0; i < manager.length; i ++){
         // 此处设置选项选中状态
         var selected = manager[i]['id'] ==  @json($ses->outsourcer) ? 'selected' : ''
         // 拼接时插入计算好的selected变量，去掉硬编码的selected
         $("#outsourcer_manager_name").append(`<option ${selected} data-manager-id='${manager[i]['id']}' value='${manager[i]['name']}'>${manager[i]['name']}</option>`);
      }
      // 如果需要渲染完成后自动取值，可以在这里调用取值函数
      // getWorkersPerManagerOutsourcerManagerName()
    })
}

异步时序管控示例 #

如果需要在其他逻辑中调用取值函数，可以通过async/await确保下拉框渲染完成：

// 页面加载时先等待下拉框初始化完成
async function initPage() {
  await getOutsourcerManagerName()
  // 此时再调用取值函数就能拿到正确值
  getWorkersPerManagerOutsourcerManagerName()
}
initPage()

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