如何为SweetAlert2的select类型输入框添加AJAX请求返回的动态选项

方式1：先请求数据再弹出弹窗（适合请求速度快、无需额外加载提示的场景） #

// 替换为你实际使用的AJAX请求方法，以下用fetch举例
fetch('/your/api/path')
  .then(response => response.json())
  .then(data => {
    // 将接口返回的数组转换为SweetAlert2要求的select选项格式：{值: 显示文本}
    const selectOptions = {}
    data.forEach(item => {
      // 字段名根据你接口实际返回结构调整
      selectOptions[item.id] = item.name
    })
    // 弹出带select的弹窗
    Swal.fire({
      title: '请选择',
      input: 'select',
      inputOptions: selectOptions,
      inputPlaceholder: '请选择对应选项',
      showCancelButton: true
    }).then(res => {
      if (res.isConfirmed) {
        // 处理用户选择的结果 res.value
        console.log('选中值：', res.value)
      }
    })
  })

方式2：先弹出弹窗再加载选项（适合需要展示加载状态的场景） #

SweetAlert2 的 inputOptions 原生支持传入 Promise 类型值，会自动等待异步逻辑执行完成后渲染选项，不需要手动操作DOM修改选择框

Swal.fire({
  title: '请选择',
  input: 'select',
  inputPlaceholder: '选项加载中...',
  // 直接传入Promise，SweetAlert2会自动等待结果
  inputOptions: new Promise((resolve) => {
    fetch('/your/api/path')
      .then(response => response.json())
      .then(data => {
        const selectOptions = {}
        data.forEach(item => {
          selectOptions[item.id] = item.name
        })
        resolve(selectOptions)
      })
      .catch(() => {
        // 请求失败时提示
        Swal.showValidationMessage('选项加载失败，请刷新重试')
        resolve({})
      })
  }),
  showCancelButton: true
}).then(res => {
  if (res.isConfirmed) {
    console.log('选中值：', res.value)
  }
})

常见调整说明 #

• 如果需要设置默认选中项，在Swal配置中添加inputValue: '你的默认值'即可，值对应选项的键
• 如果你用jQuery AJAX、axios等其他请求库，只需要替换上述代码中的fetch请求逻辑即可，选项处理逻辑完全一致
• 如果需要禁用部分选项，只需要在构造selectOptions对象时，将值设置为{disabled: true, text: '选项文本'}即可

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