将外部 json 数据动态推送到选择框答案

【问题标题】：Push external json data into selectbox dynamically将外部 json 数据动态推送到选择框
【发布时间】：2014-05-22 09:25:37
【问题描述】：

我想使用 json 数据作为外部 (.json) 文件将值动态推送到选择框。

感谢任何帮助...

【问题讨论】：

演示 JSFiddle：jsfiddle.net/vaq9N
创建一个 .json 文件并将您的 json 对象的值粘贴到该文件中。将该文件添加到您的项目文件夹中，现在使用 jquery($.getJSON();) 您可以加载 . json 文件。

标签： jquery json

【解决方案1】：

这是我的建议:)

$.getJSON( "/test.json", function( data ) {
  $.each( data, function( key, val ) {
    $("#mySelectBox").push( "<option name='" + val + '>" + val + "</option>" );
  });
});

-- 编辑

function loadlist(selobj, url) {
    selobj.empty();
    selobj.append('<option value="0">--Select Category--</option>');
    $.getJSON(url, function( data) {
      $.each(data, function(index, e) {
        console.log(e);
        selobj.append( "<option name='" + e.id + "'>" + e.name + "</option>" );
      });
    });

}
loadlist($('select#category'), 'http://nicolasbize.com/magicsuggest/random.json');

【讨论】：

我已经尝试过你的建议......请找到 jsfiddle 链接：jsfiddle.net/vaq9N/1 -我没有从外部 json 获取数据..
我的新解决方案不适用于 JS 小提琴，但可以在您的网站上运行。通过 JS fiddle 加载数据的问题是您在 HTTP 跨站点请求的权限方面遇到错误。
@RamkumarMani 我建议你选择 woverton 的答案。
目前我正在为一个项目开发 HTML-POC...我在我的项目中使用过..但它不起作用...如何解决此错误 - “XMLHttpRequest 无法加载@ 987654322@。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问“原点”'null'？” ...请让我知道您的意见...谢谢
无法从您的代码中修复。您需要编辑将 nicolasbize.com/magicsuggest/random.json 设置为允许跨站点请求的 Web 服务器的配置

【解决方案2】：

您需要使您的后端解决方案在请求时返回该外部 JSON 文件。据我所知，使用 javascript 无法加载外部文件并使用该数据。

根据您的情况，您还可以将该 javascript 变量移动到外部文件，并将其作为脚本加载到您正在创建的文档中。这本身不是有效的 JSON 文件，但如果从后端请求 JSON 不是解决方案，则可以作为解决方案。

【讨论】：

@Xantier 可以使用 jquery 加载外部“.json”文件的数据。
@SatyamKoyani 我有兴趣阅读有关此的更多信息，您能否指出正确的方向？