SweetAlert2 添加动态选项来选择输入答案

【问题标题】：SweetAlert2 add dynamic options to select inputSweetAlert2 添加动态选项来选择输入
【发布时间】：2016-06-29 09:24:25
【问题描述】：

我想为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 做到这一点？

【问题讨论】：

“动态选项”是什么意思？
@Andrei Zamfir：“我自己保存在对象中的选项”相当于var savedObject = {'value_1': 'name_1', 'value_2': 'name_2', 'value_3': 'name_3'}，不是吗？
是的，我就是这个意思
@Andrei Zamfir：所以您可以将{'SRB': 'Serbia', 'UKR': 'Ukraine', 'HRV': 'Croatia'} 替换为savedObject，这样就可以了
@Andrei Zamfir：不客气，祝你有美好的一天！

标签： javascript sweetalert sweetalert2

【解决方案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);

            }
        });
    };

【讨论】：

【解决方案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);
  }
});

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。