时间戳

首页 > 解决方案 > Sweetalert 2 同时选择下拉菜单和文本区域

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

问题描述

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

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

标签： javascriptsweetalert2

解决方案

一种可能的方法（如果您想继续使用inputand inputValidator）是您可以使用htmlswal 的属性来添加隐藏的文本输入（例如使用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 中的示例源）

推荐阅读