'missing select options with Sweet Alert

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


Solution 1:[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>

Solution 2:[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><a href="#">HTML</a></li> 
            <li><a href="#">CSS</a></li>                         
          <li><a href="#">JavaScript</a></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.");
        }
    })

Solution 3:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 tayfun K?l?ç
Solution 3

Related Questions