SweetAlert 下拉列表动态添加列表中的项目

2023-11-23

我目前正在使用 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);
}

As the SweetAlert2 文档 says, inputOptions参数可以是object or Promise.

要动态填充选择的项目,您应该使用 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.fire({
  input: 'select',
  inputOptions: inputOptionsPromise
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

请注意,SweetAlert2 将自动显示加载程序,直到 PromiseinputOptions参数将被解析或拒绝。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

SweetAlert 下拉列表动态添加列表中的项目 的相关文章

随机推荐

  • [Vue warn]:无法挂载组件:Webpack 4 中未定义模板或渲染函数

    当我升级到 Webpack 并将相关依赖项升级到 v4 后 我开始收到此错误 Vue warn Failed to mount component template or render function not defined 这是我的相关
  • 如何获取函数调用的返回值指针?

    我只需要一个指向 time Time 的指针 因此下面的代码似乎无效 c go 5 无法获取 time Now 的地址 我只是想知道为什么 除了先对变量进行赋值并获取变量的指针之外 还有什么方法可以做到这一点吗 package main i
  • 为什么 ZUUL 强制 SEMAPHORE 隔离来执行其 Hystrix 命令?

    我注意到 Spring Cloud ZUUL 强制执行隔离为 SEMAPHORE 而不是默认的 THREAD 如 Netflix 推荐的那样 评论中org springframework cloud netflix zuul filters
  • 在 Jenkins 管道中解析 XML 文件

    Note 当我的 Jenkins 环境中只有一个主节点时 我发布了这个问题 这使得序列化成为一个较小的问题 因为没有其他节点可以通信 因此这里的代码不会在多节点环境上按预期运行 例如 readFile只会从主节点读取文件 根据我的经验 最好
  • JSP 比较运算符行为

    我想比较两种不同类型
  • 如何使用c++获得线性回归线的斜率?

    我需要获得线性回归的斜率 类似于以下链接中 Excel 函数的实现方式 http office microsoft com en gb excel help slope function HP010342903 aspx 是否有 C 库或某
  • 使用 Selenium Web Driver 测试动态加载的内容

    我正在开发一个具有基于 Web 的前端的系统 我正在使用 Selenium 对其进行测试 在一页上 向下滚动时会动态加载内容 也许您从 Facebook 的好友列表中知道这一点 因为这是要求之一 通过 Javascript 使用 Selen
  • “if”语句的编码风格[重复]

    这个问题在这里已经有答案了 最近 我注意到一些程序员将 if 语句倒着写的风格 也就是说 在测试中 他们首先放置常量值 然后放置正在测试的变量 例如他们写道 bar foo if MY CONSTANT bar then do someth
  • buildroot - 如何更改内核版本字符串

    我使用 buildroot 和 Armstrong linux Linux4sam 开发 SAM9G25 EK 板 我的脚本正在创建linux版本 2 6 39 这个 令人困惑 lib modules文件夹等 我想删除它 我发现只有两个文件
  • WordPress:在显示链接之前检查是否有以前的帖子

    我使用以下代码在我的 WordPress 博客上显示 以前的帖子 链接
  • 单元测试新手

    我想知道如何使用 Visual Studio 2008 net 2 0 在现有 相当大 的应用程序中实现单元测试 我知道为现有 遗留代码开发单元测试是不现实的 但我希望对代码进行测试 我找到了大量关于如何编写代码测试的示例 但没有找到关于如
  • SMTP Indy 组件安全和身份验证属性有什么作用?

    我正在使用 indy 组件在 delphi 应用程序中实现电子邮件 我专门使用 TidSMTP 组件 我需要有效地支持所有主要的电子邮件服务器 我使用 Mozilla Thunderbird 作为我的电子邮件客户端 并将 smtp 属性与
  • Ply Lex 解析问题

    我使用 ply 作为我的 lex 解析器 我的规格如下 t WHILE r while t THEN r then t ID r a zA Z a zA Z0 9 t NUMBER r d t LESSEQUAL r lt t ASSIGN
  • 在 ASP.NET 中实现文件下载时如何处理我的文件流?

    我有课DocumentGenerator其中包含一个MemoryStream 所以我已经实施了IDisposable在课堂上 但我不知道如何 在哪里可以处置它 这是我当前的代码 它在 MVC 中执行文件下载 using DocumentGe
  • 为什么 Console.ReadKey() 会阻止另一个线程中调用的 Console.WriteLine 的输出?

    我有一个非常简单的控制台应用程序 static void Main string args DoAsync Console ReadKey Here DoAsync启动一组任务并返回 不等待任务完成 每个任务都会写入控制台 但在按下按键之前
  • 如何在 Magento 中找到合适的事件?

    有时 当寻找方便的事件来挂钩时 我会进行一些探索性编程 Modify Mage dispatchEvent加上这个额外的行 Mage log name implode array keys data 标记一个我知道我无法更快捕捉到的起点 M
  • 如何将浮点数舍入到给定精度?

    我需要一种方法将浮点数四舍五入到给定的小数位数 但我希望始终向下舍入 例如 代替 gt gt gt round 2 667 2 2 67 我宁愿 gt gt gt round down 2 667 2 2 66 你有一个朋友在quantiz
  • 如何在 Access 中“链接”链接表?

    我的场景 计算机 A 有一个包含链接表的 Access 数据库 这些链接表实际上驻留在计算机 B 上的另一个 Access 数据库中 还没有什么异常 现在我们创建一个 SQL Server 数据库 并与计算机 B 上的 Access 数据库
  • 当我的类具有静态成员时,为什么我的 C++ 程序无法链接?

    我有一个名为 Stuff 的小类 我想在其中存储东西 这些东西是 int 类型的列表 在我使用的任何类中的整个代码中 我希望能够访问 Stuff 类中的这些内容 主要 cpp include Stuff h int main Stuff t
  • SweetAlert 下拉列表动态添加列表中的项目

    我目前正在使用 sweetalert2 从对话框中捕获用户的输入 我想在链接队列对话框中使用下拉菜单 但我似乎找不到在下拉列表中动态添加项目的方法 假设我想从 JSON 格式检索数据并将其放入下拉列表中 有没有办法做到这一点 functio