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

回答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.value) {
    Swal.fire({
      type: 'success',
      html: 'You selected: ' + result.value
    });
  }
});

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

回答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.");
        }
    })

来源：https://stackoverflow.com/questions/43266673/missing-select-options-with-sweet-alert

标签

sweetalert