Select 字段和自定义输入仅显示输入值作为结果 sweetalert2

Question

swal({
title: 'Please Select a contact to send money',
input: 'select',
inputOptions: {
'1': 'Jhon',
'2': 'Gemie',
'3': 'Paul'
},
inputPlaceholder: 'Select a contact',
html: 'Amount: <input id="amount" class="form-control swal2-input">',
preConfirm: function () {
return new Promise(function (resolve) {
    resolve(
        document.getElementById('amount').value,
    )
})
}
onOpen: function () {
$('#swal-input1').focus()
}
}).then(function (result) {
swal(JSON.stringify(result))
}).catch(swal.noop)

上面的代码只显示了文本输入值作为结果，我怎样才能在结果数组中也得到 select 值。我使用 SweetAlert2，知道吗？谢谢！！

Answer 1

preConfirm 函数的第一个参数应该是所选选项的值。

这意味着您可以这样做：

swal({
  title: 'Please Select a contact to send money',
  input: 'select',
  inputOptions: {
  '1': 'Jhon',
  '2': 'Gemie',
  '3': 'Paul'
  },
  inputPlaceholder: 'Select a contact',
  html: 'Amount: <input id="amount" class="form-control swal2-input">',
  preConfirm: function (selectedOption) {
    return new Promise(function (resolve) {
        resolve({selectedOption: selectedOption, value: document.getElementById('amount').value})
    });
  },
  onOpen: function () {
    $('#swal-input1').focus();
  }
}).then(function (result) {
  console.log(result);
  swal(JSON.stringify(result))
}).catch(swal.noop)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/sweetalert2/6.4.4/sweetalert2.min.js"></script>
<link href="https://cdn.jsdelivr.net/sweetalert2/6.4.4/sweetalert2.css" rel="stylesheet"/>

Select 字段和自定义输入仅显示输入值作为结果 sweetalert2

Select field and custom input display only the input value as result sweetalert2

javascript

sweetalert