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 下拉列表动态添加列表中的项目 的相关文章

  • 将 JSON 数据导入 Google 表格

    我从 Web 服务中提取数据 其格式为 JSON 我正在为 Google Sheets 编写一个 Google Apps 脚本 它将为我填充数据 我的问题是 我似乎无法解析它 Doing var dataset myJSONtext Bro
  • 暂时禁用提交按钮

    我有一个将大文件上传到服务器的表单 像这样的事情
  • 在 Django 模板中通过键访问字典

    我正在将字典从我的视图传递到模板 所以 key1 value1 key2 value2 传入并循环键 值对很好 但是我还没有找到从特定键直接在视图中访问的优雅解决方案 例如 key1 例如 bu json items key1 我可以使用一
  • 在 javascript/jquery 中将光标更改为等待

    当调用函数时 如何让光标更改为此加载图标以及如何将其更改回 javascript jquery 中的普通光标 在你的 jQuery 中使用 body css cursor progress 然后又恢复正常 body css cursor d
  • 简单模式对话框中链接的 Tab 键顺序

    我正在使用优秀的 jquery simplemodal 对话框插件来显示项目列表 这些项目包含超链接 除了模式对话框中的链接不会作为选项卡顺序的一部分出现之外 一切都很好 我尝试显式设置 tabindex 但由于某种原因 只有输入元素按 T
  • 了解设置 JQuery 变量

    了解设置 JQuery 变量 最近 我通过在 StackOverflow 上遇到的另一个问题寻找帮助 了解到如何设置 JQuery 变量 如下所示 您可以通过简单地调用变量来创建输入字段 并且锚变量似乎也定义了样式 var clicked
  • Rails 4 可安装引擎,找不到文件“jquery”

    我正在创建一个 Rails 可安装引擎插件 它使用 gem jquery rails 我在 gemspec 文件中添加了这段代码 s add dependency jquery rails gt 3 0 1 and run bundle i
  • 物化模式覆盖整个页面(模式弹出窗口未带到前台)

    由于保密原因 我无法上传 Web UI 的屏幕截图 物化模态应该表现得像here http materializecss com modals html 但不幸的是 我的网站发生的情况是 包括模式在内的整个页面都是 深色背景 的一部分 模式
  • 如何在 jQuery 中获取 ul 列表中 li 的第一个 href 链接

    我有以下清单 ul class tabs li a href testlink php First link a li li a href testlink2 php Second link a li ul 我想获取第一个链接的 href
  • jQuery 可以在用户输入数字时添加逗号吗?

    当用户输入数字时 如何动态添加逗号 有没有一个好的数字格式化程序可以提供帮助 我必须稍后添加这些数字 所以我最终必须删除一行中的逗号 但屏幕需要显示逗号以提高可读性 运行代码片段以查看其工作情况 input number keyup fun
  • 文件上传控件 OnChange 事件 JQuery

    我正在尝试使用 AJAX JQUERY 和 Net HTTPHandler 构建页面来上传文件 如下所示http dotnet dzone com news async file upload jquery and http dotnet
  • jquery.validate 中是否有一个函数可以像重置表单一样重置单个字段?

    我想调用 jquery 函数来手动删除单个字段中的错误并重置错误标记 是否有一个函数可以执行此操作 类似于 resetForm 函数 您可以执行以下操作来验证单个字段 your field valid 也许它会对某人有所帮助 Thanks
  • 使用 Newtonsoft 和 C# 反序列化嵌套 JSON

    我正在尝试解析来自 Rest API 的 Json 响应 我可以获得很好的响应并创建了一些类模型 我正在使用 Newtonsoft 的 Json Net 我的响应中不断收到空值 并且不确定我的模型设置是否正确或缺少某些内容 例如 我想要获取
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • jQuery 获取元素内的鼠标位置

    我希望制作一个控件 用户可以在 div 内单击 然后拖动鼠标 然后松开鼠标以指示他们想要的内容有多长 这是针对日历控件的 因此用户将指示特定事件的时间长度 看起来最好的方法是在父 div 上注册一个 mousedown 事件 而父 div
  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • JSON:TypeError:Decimal('34.3')不是JSON可序列化的[重复]

    这个问题在这里已经有答案了 我正在运行一个 SQL 查询 它返回一个小数列表 当我尝试将其转换为 JSON 时 出现类型错误 查询 res db execute SELECT CAST SUM r SalesVolume 1000 0 AS
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐

  • [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