如何为sweetAlert.js的选择元素（select）添加ID属性？

嘿，我懂你现在的烦恼——想给SweetAlert里的select加ID，但翻官方文档没找到直接配置的方法对吧？别慌，这几个实用的办法能帮你搞定：

方法1：自定义HTML+didOpen回调（SweetAlert2） #

如果是自己写select的HTML代码，可以先给它加个class方便定位，然后在弹窗打开后的回调里给它设置ID：

Swal.fire({
  title: '请选择一项',
  html: '<select class="temp-select"><option value="1">选项A</option><option value="2">选项B</option></select>',
  didOpen: () => {
    // 定位到select并设置ID
    document.querySelector('.temp-select').id = 'my-target-select';
  },
  confirmButtonText: '确认选择'
});

方法2：用内置input: 'select'配置+getInput()（SweetAlert2） #

如果是用SweetAlert2内置的select输入框配置，直接用Swal.getInput()获取生成的select元素，再给它加ID更高效：

Swal.fire({
  title: '请选择一项',
  input: 'select',
  inputOptions: {
    'opt-a': '选项A',
    'opt-b': '选项B'
  },
  didOpen: () => {
    const selectEl = Swal.getInput();
    selectEl.id = 'my-target-select';
  },
  confirmButtonText: '确认选择'
});

方法3：老版本SweetAlert的兼容方案 #

如果你用的是旧版SweetAlert（非SweetAlert2），可以用onOpen回调来实现：

swal({
  title: '请选择一项',
  content: {
    element: 'select',
    attributes: {
      class: 'temp-select'
    }
  },
  onOpen: () => {
    document.querySelector('.temp-select').id = 'my-target-select';
  }
});

核心思路 #

官方文档没直接提供ID配置项没关系，我们可以利用弹窗打开后的回调函数——等select元素渲染到DOM里之后，再通过DOM操作给它添加ID属性，完全能达到需求。

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