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

【问题标题】：Sweetalert 2 select dropdown and textarea at the same timeSweetalert 2 同时选择下拉菜单和文本区域
【发布时间】：2018-11-14 04:15:52
【问题描述】：

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

例如：我的选择列表有 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)
 }

【问题讨论】：

看看stackoverflow.com/questions/31463649/…

标签： javascript sweetalert2

【解决方案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 中示例的源代码）

【讨论】：