javascript - SweetAlert2 添加动态选项来选择输入

Question

我想向SweetAlert2输入类型选择添加动态选项，如下所示：

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

而不是这 3 个国家，我想添加我自己的选项，这些选项保存在一个对象中。我怎样才能使用 javascript 做到这一点？

Answer 1

您可以尝试像这样构建选项对象。

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

            }
        });
    };

Answer 2

首先你需要创建一个模型示例：

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

对于后获取选项：

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

然后，您需要将模型创建为：

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