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)
 }

javascript sweetalert2
person nmm    schedule 14.11.2018    source источник
comment
Взгляните на stackoverflow.com/questions/ 31463649/   -  person Alireza Fattahi    schedule 14.11.2018

Ответы (1)


arrow_upward
2
arrow_downward

Один из возможных способов (если вы хотите продолжать использовать input и inputValidator) заключается в том, что вы можете использовать свойство html swal для добавления скрытого ввода текста (например, используя 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-адресе выше)

person G. Verni    schedule 14.11.2018