2

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

键值结构用于填充要选择的项目。有没有办法从本地文件中做到这一点？

我的特殊情况：我正在开发一个执行一些操作并使用来自数据库的一些信息的网站。对我来说，创建一个具有此结构的 json 文件真的很容易：

[{
    "tag1": "tag1",
    "tag2": "tag2",
    "tag3": "tag3"
}]

其中 tag[i] 可以是不遵循该 tag[i] 结构的任何类型的字符串。

在这个问题中，我发现这可以使用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 解析函数中。

4

1 回答 1

2

检查getjson表单 jquery。我正在使用myjson为此创建演示

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>

如有疑问请评论

于 2017-10-02T10:03:44.367 回答