Раскрывающийся список SweetAlert динамически добавлять элементы в список
В настоящее время я использую sweetalert2 для захвата ввода пользователя из диалогового окна. Я хотел бы использовать раскрывающийся список в диалоговом окне очереди очереди, но я не могу найти способ динамически добавлять элементы в раскрывающийся список. Допустим, я хочу получить данные из формата JSON и поместить их в выпадающий список. Есть ли способ сделать это?
function userInput() {
swal.setDefaults(
{
showLoaderOnConfirm: true,
confirmButtonText: 'Next →',
showCancelButton: true,
animation: true,
progressSteps: ['1', '2', '3']
}
);
var steps = [
{
text: 'Select an author to analyze the commit',
input: 'select',
inputOptions: {
'SRB': 'Serbia', // How do I dynamically set value?
'UKR': 'Ukraine',
'HRV': 'Croatia'
}
},
{
text: 'Select multiple authors to compare their commits',
input: 'select',
inputOptions: {
'SRB': 'Serbia', // How do I dynamically set value?
'UKR': 'Ukraine',
'HRV': 'Croatia'
}
},
{
text: 'Select a file directory to analyze all author\'s commit',
input: 'select',
inputOptions: {
'SRB': 'Serbia', // How do I dynamically set value?
'UKR': 'Ukraine',
'HRV': 'Croatia'
}
}
];
swal.queue(steps).then(function(result) {
swal.resetDefaults();
swal({
type: 'success',
title: 'Success',
text: 'Scroll down for statistics!',
html:
'Your selections: <pre>' +
JSON.stringify(result) +
'</pre>',
confirmButtonText: 'Ok',
showCancelButton: false
})
}, function() {
swal.resetDefaults()
})
}
Получить данные в формате JSON:
function getData(repolink) {
readDataFromGit('https://api.github.com/repos/' + repolink + '/git/trees/master?recursive=1', function(text){
data = JSON.parse(text);
$.each(data, function(i, v) {
// Retrieve v.login data!
data = v.login;
})
});
}
function readDataFromGit(link, callback) {
var request = new XMLHttpRequest();
request.overrideMimeType("application/json");
request.open('GET', link, true);
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status == "200") {
callback(request.responseText);
}
};
request.send(null);
}
1 ответ
Решение
Как сказано в документации SweetAlert2, inputOptions
параметр может быть object
или же Promise
,
Для динамического заполнения выбранных элементов вы должны использовать обещания, вот простой пример:
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({
input: 'select',
inputOptions: inputOptionsPromise
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>
Обратите внимание, что SweetAlert2 автоматически покажет загрузчик, пока Обещание для inputOptions
Параметр будет разрешен или отклонен.