从 json 创建下拉列表

2024-05-08

我有一个这种形式的 json:

{"COLUMNS":["ID", "Name"],"DATA":
[ 
  ["1","Joe"],
  ["2", "Sam"],
  ["3", "Doug"],
]
}

我正在寻找一个如何在 javascript 中从该数据创建下拉列表的示例,但 json/dropdown 列表的所有示例 json 都采用不同的格式。我没有太多使用过 javascript 或 json 数据,所以我不知道从哪里开始。谁能给我指出一个很棒的教程或示例的方向?谢谢。


JavaScript:

window.onload = function () {
    var JSON = {
        "COLUMNS":["ID", "Name"],
        "DATA": [ 
            ["1","Joe"],
            ["2", "Sam"],
            ["3", "Doug"]
        ]
    }, select = document.getElementById("selector");
    for (var i = 0, at = JSON.DATA[i], id = at[0], name = at[1]; i < JSON.DATA.length; i++) {
        var option = document.createElement("option");
        option.value = id;
        option.textContent = name;
        select.appendChild(option);
    };
};

请确保如果您的 JSON 是字符串形式,请首先使用以下命令解析它JSON.parse();

HTML:

<select id="selector"></select>

JSFiddle 示例:http://jsfiddle.net/su7sr/1 http://jsfiddle.net/su7sr/1

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

从 json 创建下拉列表 的相关文章

随机推荐

  • Cordova Android 应用程序中的网页不可用

    编辑 我一直在解决这个问题并回顾我的所有步骤 我很乐意缩小这个问题的规模 并在令人困惑的情况下获得更多确切的细节 目前 我觉得 Keycloak 似乎只想将我重定向到 https 据我所知 这应该是 Wildfly 服务器配置问题 编辑 我
  • 无法在 PowerShell 中完全解析 XML

    我有一个 XML 文件 我想解析该文件并检索特定信息 为了便于理解 下面是 XML 文件的屏幕截图 我想解析 XML 并为每个Item节点 检索屏幕截图中指示的字段 检索到的每个值都需要针对每个项目节点进行格式化 最后 我希望能够指定一个要
  • Ctrl-退格键 Visual Studio 2010

    I recently upgraded to Visual Studio 2010 and found out that when I press Ctrl Backspace on an empty line it will delete
  • Python ttk.combobox 强制发布/打开

    我正在尝试扩展 ttk 组合框类以允许自动建议 我到目前为止的代码运行良好 但我想让它在输入一些文本后显示下拉列表 而不从小部件的输入部分移除焦点 我正在努力解决的部分是找到一种强制下拉的方法 在 python 文档中我找不到任何提及这一点
  • Spring Data、JPA @OneToMany Lazy fetch 在 Spring Boot 中不起作用

    I have OneToMany之间的关系FabricRoll and FabricDefect OneToMany cascade CascadeType ALL fetch FetchType LAZY JoinColumn name
  • Google 的新地点库(实现“com.google.android.libraries.places:1.0.0”)无法解析

    我正在尝试迁移到新的 Places SDK 客户端 但我被告知要安装的依赖项文档 https developers google com places android sdk client migration给我一个 无法解决 错误 我确保
  • Python Subversion 包装器库

    在颠覆的文档 http svnbook red bean com en 1 7 svn developer usingapi html svn developer usingapi otherlangs有一个从 Python 使用 Subv
  • 为什么吐司消息在 Marshmallow 6.0.1 中不显示,而低于 6.0 则显示

    我正在使用 toast 消息传递 Toast 消息的显示远低于 Marshmallow 6 0 但对于 Marshmallow 6 0 和 6 Toast 未显示 推送通知也未显示 请解决这个问题 对于吐司 Toast makeText c
  • 经典 asp 和 IIS 应用程序池之间有什么关系?

    asp 是否在为其配置网站的 IIS 应用程序池中运行 或者应用程序池仅适用于asp NET应用程序 这两者之间有何关系 我需要知道什么才能了解 谁在做什么以及他们在哪里做 ASP Classic 应用程序将在分配给它的应用程序池中运行 A
  • 自动化 RStudio 处理 RMarkdown?

    我有一个 RMarkdown 文件 用于生成漂亮的 HTML 报告 问题是 我希望能够自动化它 以便它可以在无头服务器上运行 因此 不会有人启动 Rstudio 并按下 knithtml 按钮 而且 Rstudio 似乎正在做很多额外的魔法
  • 我想优化这个短循环

    我想优化这个简单的循环 unsigned int i while j 0 j is an unsigned int with a start value of about N 36 000 000 float sub 0 i 1 unsig
  • 计算分组序列中两个值之间的差异

    这是这篇文章的后续问题 循环遍历 R 中的数据帧并测量两个值之间的时间差 https stackoverflow com questions 44885856 loop through dataframe in r and measure
  • 为什么每次合并分支后我的 git log graph 都会多增长一行?

    我习惯使用git log oneline graph decorate all作为别名git ll在终端中查看提交图表 但是当我每次合并我的时 一个问题让我感到困惑develop to master 上面命令的输出可能是这样的 0d1bf7
  • WritePrivateProfileString 未在末尾添加属性

    我正在使用以下命令在 ini 文件中写入一些属性WritePrivateProfileString函数并且一切正常 但是当我添加多行文本时 出现了问题 这是代码和输出 WritePrivateProfileString T General
  • 通过 JavaScript 获取页面/iframe 的编码

    我想通过 JavaScript 或浏览器中的其他一些 API 以编程方式确定页面的编码 我想要这些信息的原因是因为我试图对主要浏览器支持的字符编码进行模糊测试 显然仅仅因为我发送了适当的 内容类型 并不意味着浏览器会使用编码做正确的事情 欢
  • 如何通过MFC将应用程序设置保存到注册表中?

    我有一个由 MFC 项目向导创建的 MFC 应用程序 我想在注册表中保存 读取应用程序设置 所以问了这个question https stackoverflow com questions 1880275 good c registry w
  • 更改 WinForms 按钮突出显示颜色

    I found 这一页 https stackoverflow com questions 9260303 how to change menu hover color winforms 其中概述了如何更改 MenuStrip 及其项目的呈
  • 岛屿和缺口问题

    背景故事 我有一个数据库 其中包含卡车司机的数据点 其中还包含 在卡车上时 驾驶员可以拥有 驾驶员身份 我想做的是按司机 卡车对这些状态进行分组 截至目前 我已尝试使用 LAG LEAD 来提供帮助 这样做的原因是我可以知道驱动程序状态何时
  • waitUntilObjectExists() Amazon S3 PHP SDK 方法,它到底是如何工作的?

    该函数是否会暂停 php 脚本 直到在 s3 服务器上找到该对象 我将它放在 foreach 循环中 一张一张地上传图像 找到对象后 我调用一个方法在本地删除图像 然后删除本地文件夹 如果为空 这是正确的处理方式吗 谢谢 foreach f
  • 从 json 创建下拉列表

    我有一个这种形式的 json COLUMNS ID Name DATA 1 Joe 2 Sam 3 Doug 我正在寻找一个如何在 javascript 中从该数据创建下拉列表的示例 但 json dropdown 列表的所有示例 json