javascript - Sweetalert 2 同时选择下拉菜单和文本区域

Question

我想知道是否可以在同一个甜蜜警报中同时允许选择下拉列表和输入文本区域。

例如:我的选择列表有 4 个选项，最后一个选项是其他选项。我想要当用户选择其他人时，它会显示一个文本区域供用户输入。我使用的类似于 sweetalert 2 给出的内容，如下所示。

  swal({
  title: 'Select field validation',
 input: 'select',
 inputOptions: {
   'apples': 'Apples',
   'bananas': 'Bananas',
   'grapes': 'Grapes',
   'Others': 'Others'
 },
  inputPlaceholder: 'Select a fruit',
 showCancelButton: true,
 inputValidator: (value) => {
  return new Promise((resolve) => {
    if (value === 'oranges') {
      resolve()
    } else {
      resolve('You need to select oranges :)')
     }
  })
 }
  })

 if (fruit) {
 swal('You selected: ' + fruit)
 }

Answer 1

一种可能的方法(如果你想继续使用 input 和 inputValidator)是你可以使用 swal 的 html 属性来添加隐藏文本输入(例如使用 display: none):

html: '<input type="text" id="fruit-text" class="swal2-input" style="display: none;">',

然后您可以使用 onBeforeOpen 订阅输入的更改事件，例如:

onBeforeOpen: (dom) => {
  swal.getInput().onchange = function (event) {
    if (event.target.value === "Others") {
      dom.querySelector('#fruit-text').style.display = 'initial'
    } else {
      dom.querySelector('#fruit-text').style.display = 'none'
    }
  }

},

可以在 https://south-carol.glitch.me/ 找到一个例子

请注意，在这种情况下，您应该使用 preConfirm 来处理 swal 的状态，并在需要时返回文本输入的值(请参阅上面 url 中的示例源)