SweetAlert dropdown dynamically add items in list

Question

I am currently using sweetalert2 to capture user\'s input from the dialog. I would like to use the dropdown in chaining queue dialog but I can\'t seem to find a way to dynam

Answer 1

As the SweetAlert2 documentation says, inputOptions parameter can be object or Promise.

To populate select items dynamically you should use promises, here's the simple example:

var inputOptionsPromise = new Promise(function (resolve) {
  // get your data and pass it to resolve()
  setTimeout(function () {
    resolve({
      '#FF0000': 'Red',
      '#00FF00': 'Green',
      '#0000FF': 'Blue'
    })
  }, 2000)
})

Swal.fire({
  input: 'select',
  inputOptions: inputOptionsPromise
})

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

Notice, that SweetAlert2 will automatically show a loader until the Promise for inputOptions parameter will be resolved or rejected.