Sweetalert 2 select 下拉菜单和文本区域同时出现

Question

我想知道是否可以在同一个提示中同时允许 select 下拉列表和输入文本区域。

例如：我的select列表有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 的状态，并在需要时使用 return 文本输入的值（请参阅示例来源 url 以上）

Sweetalert 2 select 下拉菜单和文本区域同时出现

Sweetalert 2 select dropdown and textarea at the same time

javascript

sweetalert2