missing select options with Sweet Alert - sweetalert

Question

This may be a ServiceNow issue, but I added a Sweet Alert to show a select box just so I can gather a value to pass on to the next record... but the select box is not showing, the popup is there just no box or options. What am I missing? Screenshot:
Select Box Alert
Thanks so much, super frustrated with something I thought would be simple to add :)
swal({
title: 'Select Outage Tier',
input: 'select',
inputOptions: {
'1': 'Tier 1',
'2': 'Tier 2',
'3': 'Tier 3'
},
inputPlaceholder: 'required',
showCancelButton: true,
inputValidator: function (value) {
return new Promise(function (resolve, reject) {
if (value !== '') {
resolve();
} else {
reject('You need to select a Tier');
}
});
}
}).then(function (result) {
swal({
type: 'success',
html: 'You selected: ' + result
});
});

Answer 1

Your code snippet is for SweetAlert2 and most probably your issue is that you're including the original unmaintained SweetAlert plugin, which doesn't have the select-box support.
Your code works just fine with included SweetAlert2 library:
Swal.fire({
title: 'Select Outage Tier',
input: 'select',
inputOptions: {
'1': 'Tier 1',
'2': 'Tier 2',
'3': 'Tier 3'
},
inputPlaceholder: 'required',
showCancelButton: true,
inputValidator: function (value) {
return new Promise(function (resolve, reject) {
if (value !== '') {
resolve();
} else {
resolve('You need to select a Tier');
}
});
}
}).then(function (result) {
if (result.isConfirmed) {
Swal.fire({
icon: 'success',
html: 'You selected: ' + result.value
});
}
});
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>

Answer 2

Hi try this block after change it,
var span = document.createElement("span")
span.innerHTML = '<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
swal({
title: "Rapor Alacak Yetkili ",
text: "Rapor Almak İçin Onaylayınız",
icon: "info",
confirmButtonText: "Kaydet",
cancelButtonText: 'İptal',
content: span,
buttons: ["İptal", "Tamam"],
}).then((willDelete) => {
if (willDelete) {
Kullanici = $("#swaladi").val() + " " + $("#swalsoyadi").val()
var win = window.open(url, '_blank');
win.focus();
} else {
swal("Rapor Alma İptal Edilmiştir.");
}
})

Answer 3

Using preConfirm() methods and showValidationMessage() did the job, do not forget to reset validations.Hope this will help.
title: 'Select Outage Tier',
input: 'select',
inputOptions: {
'1': 'Tier 1',
'2': 'Tier 2',
'3': 'Tier 3'
},
inputPlaceholder: 'required',
showCancelButton: true,
preConfirm: (value) => {
if (!value) {
Swal.showValidationMessage(
'<i class="fa fa-info-circle"></i> You need to select a Tier'
);
}else{
/**Reset validation**/
Swal.resetValidationError();
}
},
}).then(function (result) {
if (result.isConfirmed) {
Swal.fire({
icon: 'success',
html: 'You selected: ' + result.value
});
}
})```
[1]: https://sweetalert2.github.io/#examples