如何在Ajax+SweetAlert2中为HTML select设置默认选中值

方法1：在HTML模板中直接通过模板字符串判断设置 #

在SweetAlert2的html配置项里编写表单模板时，可借助ES6模板字符串的条件判断，给匹配的<option>添加selected属性，弹窗打开时就能自动选中对应选项。

示例代码：

// 假设已通过Ajax获取到response数据
Swal.fire({
  title: '用户信息',
  html: `
    <div>
      <input type="text" id="name" value="${response.name}" class="swal2-input">
      <input type="number" id="age" value="${response.age}" class="swal2-input">
      <select id="country" class="swal2-input">
        <option value="USA" ${response.country === 'USA' ? 'selected' : ''}>USA</option>
        <option value="England" ${response.country === 'England' ? 'selected' : ''}>England</option>
        <option value="Canada" ${response.country === 'Canada' ? 'selected' : ''}>Canada</option>
      </select>
    </div>
  `,
  showCancelButton: true,
  confirmButtonText: '保存'
});

核心逻辑是用三元运算符判断返回的response.country与当前option的value是否匹配，匹配则添加selected属性。

方法2：利用SweetAlert2的onOpen回调设置 #

如果表单模板是提前定义好的，或者更倾向于弹窗打开后再操作DOM，可通过onOpen回调获取select元素，直接设置其value属性来选中对应选项。

示例代码：

Swal.fire({
  title: '用户信息',
  html: `
    <div>
      <input type="text" id="name" class="swal2-input">
      <input type="number" id="age" class="swal2-input">
      <select id="country" class="swal2-input">
        <option value="USA">USA</option>
        <option value="England">England</option>
        <option value="Canada">Canada</option>
      </select>
    </div>
  `,
  showCancelButton: true,
  confirmButtonText: '保存',
  onOpen: () => {
    // 回显输入框数据
    document.getElementById('name').value = response.name;
    document.getElementById('age').value = response.age;
    // 设置select默认选中项
    document.getElementById('country').value = response.country;
  }
});

这种方式更灵活，尤其适合选项较多或动态生成的场景，无需逐个写条件判断，直接给select的value赋值即可，浏览器会自动匹配对应选项。

注意：必须保证response.country的值与<option>的value属性完全一致（包括大小写、拼写），否则无法正确选中。

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