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?

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?

• javascript
• sweetalert
• sweetalert2

Share Improve this question Follow edited Jan 29, 2018 at 22:22 Limon Monte 54.5k4949 gold badges189189 silver badges220220 bronze badges asked Jun 29, 2016 at 9:24 Andrei ZamfirAndrei Zamfir 14311 gold badge33 silver badges1111 bronze badges 6

• what do you mean by "dynamic options"? – Limon Monte Commented Jun 29, 2016 at 9:34
• @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 ? – Trung Le Nguyen Nhat Commented Jun 29, 2016 at 9:40
• yup, that's what I mean – Andrei Zamfir Commented Jun 29, 2016 at 9:50
• @Andrei Zamfir: so you can replace {'SRB': 'Serbia', 'UKR': 'Ukraine', 'HRV': 'Croatia'} to savedObject and this would works – Trung Le Nguyen Nhat Commented Jun 30, 2016 at 10:10
• 1 @Andrei Zamfir: you're wele, have a good day! – Trung Le Nguyen Nhat Commented Jul 2, 2016 at 1:49

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

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

            }
        });
    };

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