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属性来添加隐藏的文本输入（例如，使用{ {1}}）：

display: none

然后，您可以使用html: '<input type="text" id="fruit-text" class="swal2-input" style="display: none;">',订阅输入中的更改事件，例如：

onBeforeOpen

}，

有关示例，请访问https://south-carol.glitch.me/

请注意，在这种情况下，您应该使用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' } }处理swal的状态，并在需要时返回文本输入的值（请参见上面url的示例来源）

Sweetalert 2同时选择下拉列表和文本区域

1 个答案: