SweetAlert2 add dynamic options to select input

Question

I want to add dynamic options to a SweetAlert2 input type select that looks like this:

swal({
title: 'Select Ukraine',
input: 'select',
inputOptions: {
  'SRB': 'Serbia',
  'UKR': 'Ukraine',
  'HRV': 'Croatia'
},
inputPlaceholder: 'Select country',
showCancelButton: true,
inputValidator: function(value) {
  return new Promise(function(resolve, reject) {
    if (value === 'UKR') {
      resolve();
    } else {
      reject('You need to select Ukraine :)');
    }
  });
}
}).then(function(result) {
  swal({
    type: 'success',
    html: 'You selected: ' + result
  });
})

Instead of those 3 countries I want to add my own options which are saved in an object. How can I do that using javascript?

Lilliamlillian

what do you mean by "dynamic options"? – Insurer

@Andrei Zamfir: "my own options which are saved in an object" is equivalent to var savedObject = {'value_1': 'name_1', 'value_2': 'name_2', 'value_3': 'name_3'}, isn't it ? – Prelate

yup, that's what I mean – Lilliamlillian

@Andrei Zamfir: so you can replace {'SRB': 'Serbia', 'UKR': 'Ukraine', 'HRV': 'Croatia'} to savedObject and this would works – Prelate

@TrungLeNguyenNhat wow that was so simple I didn't even think of it. Thanks a bunch! – Lilliamlillian

@Andrei Zamfir: you're welcome, have a good day! – Prelate

Answer 1

You Could possibly try building up the options object like this.

function linkThing() {

        //this i assume would be loaded via ajax or something?
        var myArrayOfThings = [
            { id: 1, name: 'Item 1' },
            { id: 2, name: 'Item 2' },
            { id: 3, name: 'Item 3' }
        ];

        var options = {};
        $.map(myArrayOfThings,
            function(o) {
                options[o.id] = o.name;
            });

        swal({
            title: 'My Title',
            text: 'Please select an option',
            input: 'select',
            inputOptions: options,
            showCancelButton: true,
            animation: 'slide-from-top',
            inputPlaceholder: 'Please select'
        }).then(function (inputValue) {
            if (inputValue) {

                console.log(inputValue);

            }
        });
    };

Chirr

Answer 2

First u need create a model example:

{
  "VALUE" : "TEXT",
  "VALUE-2" : "TEXT-2",
  "VALUE-3" : "TEXT-3"
}

For after get options as:

<option value="VALUE">TEXT</option>

then, u need create model as:

var model = [];

array.foreach(element => {
   model[element.idObject] = element.textObject;
});

swal({
  title: 'Title',
  text: 'Description',
  input: 'select',
  inputOptions: model,
  showCancelButton: true,
  inputPlaceholder: 'Select a option'
}).then(function (inputValue) {
  if (inputValue) {
     console.log(inputValue);
  }
});

Gabrila

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Linnette