如何从 JSON 创建 HTML 选择选项

Posted 2023-05-08

【中文标题】如何从 JSON 创建 HTML 选择选项

【英文标题】：How to create HTML select option from JSON

【发布时间】：2016-11-28 12:02:35

【问题描述】：

我有一个 JSON 文件

    "1990": [ 1, 2, 3 ],
    "1991": [ 4, 5, 6 ]
    // and so on...
;

我有一个 html 文件，因为其中包含大量数据，所以我循环使用它。

<select name="year" id="year">
    <option value="1990">1</option>
    <option value="1990">2</option>
    <option value="1990">3</option>
    <option value="1991">4</option>
    <option value="1991">5</option>
</select>

我已经尝试过this way，但它对此不起作用有什么建议我如何解决它。

http://jsfiddle.net/MuGj7/

提前致谢，欢迎提出建议。

【问题讨论】：

我有另一个选择选项，我的值为 1990，它应该链接到今年。两者都链接在一起。当一个人从另一个选项中选择 1990 时，它应该链接这个值

Rory McCrossan 先生我正在做一个看起来像这样的项目，所以我正在一一尝试。感谢您的宝贵时间demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php

【参考方案1】：

只需迭代对象并为每次迭代附加一个选项元素：

var obj = 
    "1990": [ 1, 2, 3 ],
    "1991": [ 4, 5, 6 ]  
;

for (var i in obj) 
  for (var y in obj[i]) 
    $('#year').append($('<option value="' + i + '" data-value="' + i + '">' + obj[i][y] + '</option>'));
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="year" id="year"><select>

【讨论】：

我们可以向它添加额外的数据值吗？根据 1990。像这样 1 2 3。此表正在链接到彼此相关的另一个表。

在创建元素时添加任何属性（查看我更新的答案）

我正在做一个看起来像 demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php 的项目。但是 1 2 3 这是一个数组。它应该只从数组中计算。如果数组包含 20 它应该循环通过。 value 应该是 1990 并且 data-value=1 等等。

我认为我们已经计算了数组并循环遍历它。