问题描述
在Sweetalert2中选择示例:
In Sweetalert2 select example:
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
})
})
键值结构用于填充要选择的项目.有什么办法可以从本地文件执行此操作吗?
a key value struct is used to populate the items to select. Is there any way to do it from a local file?
我的特殊情况:我正在开发一个网站,该网站执行一些操作并使用一些来自数据库的信息.对我来说,创建具有以下结构的json文件真的很容易:
My particular case: I'm developing a website that perform some actions and uses some info that comes from a DB. It will be really easy to me, to create a json file that have this struct:
[{
"tag1": "tag1",
"tag2": "tag2",
"tag3": "tag3"
}]
其中tag [i]可以是不会跟随该tag [i]结构的任何类型的字符串.
Where tag[i] could be any kind of string that will not follow that tag[i] struct.
在这个问题中,我发现这可能是使用 Promise
In this question I've found that this can be performed using a Promise:
var inputOptionsPromise = new Promise(function (resolve) {
setTimeout(function () {
resolve({
//place options here
})
}, 2000)
})
$(function(){
$("#taginfo").click(function(){
console.log("click on tag info");
swal({
title: 'Select Tag',
input: 'select',
inputOptions: inputOptionsPromise,
inputPlaceholder: 'Select tag',
showCancelButton: true,
inputValidator: function (value) {
return new Promise(function (resolve, reject) {
if (value != '') {
document.getElementById('taginfo').value = value;
resolve();
}else {
reject('You need to select one tag')
}
})
}
}).then(function (result) {
swal({
type: 'success',
html: 'You selected: ' + result
})
})
});
});
但是我不知道如何将json文件(位于/public/resources/tags.json下)加载到inputOptionsPromise解析函数中.
推荐答案
检查 getjson 形式的jQuery.我正在使用 myjson 为此创建演示
Check getjson form jquery. I am using myjson to create demo for this
var inputOptionsPromise = new Promise(function(resolve) {
// get your data and pass it to resolve()
setTimeout(function() {
$.getJSON("https://api.myjson.com/bins/10dvr9", function(data) {
resolve(data)
});
}, 2000)
})
$(function() {
$("#taginfo").click(function() {
console.log("click on tag info");
swal({
title: 'Select Tag',
input: 'select',
inputOptions: inputOptionsPromise,
inputPlaceholder: 'Select tag',
showCancelButton: true,
inputValidator: function(value) {
return new Promise(function(resolve, reject) {
if (value != '') {
document.getElementById('taginfo').value = value;
resolve();
} else {
reject('You need to select one tag')
}
})
}
}).then(function(result) {
swal({
type: 'success',
html: 'You selected: ' + result
})
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/sweetalert2/5.3.5/sweetalert2.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/sweetalert2/5.3.5/sweetalert2.js"></script>
<button id="taginfo">Show Sweet Alert</button>
如有疑问,请发表评论
这篇关于选择示例中来自文件的sweetalert2 inputoptions的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!