如何在 HTML 中使用 JSON 外部文件填充下拉按钮答案

【问题标题】：How to populate a dropdown button with JSON external file in HTML如何在 HTML 中使用 JSON 外部文件填充下拉按钮
【发布时间】：2016-08-26 12:25:40
【问题描述】：

我是 json 新手，正在为一段代码苦苦挣扎。我想用来自 json 文件（国家名称）的数据填充引导程序 dropdown 按钮。

这是我的html代码：

<div class="dropdown btn-group" id="countryBut">
    <button type="button"  class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Select Your Country <span class="caret"></span>
    </button>
    <ul class="but-dropdown dropdown-menu">

    </ul>
</div><!--end of btn-group-->

这是我的 json 外部文件 - countries.json

{
  "countries": [{
    "name":"Afghanistan"
  }, {
    "name": "Albania"
  }, {
    "name": "Argentina"
  }, {
    "name": "United Kingdom"
  }]
}

这是我在 html 中的 javascript 文件：

<script type="text/javascript">
  $(document).ready(function(){
$.getJSON('countries.json', function(data) {
    for( var index in data.countries ) {
        $('#countryBut ul').append('<li><a href="#" data-maker="'+data.countries[index].name
   +'>'+data.countries[index].name+'</a></li>');
    }
  });
});
</script>

试图让它工作，但找不到任何有用的资源。有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery html json twitter-bootstrap

【解决方案1】：

你的 javascript 部分有点奇怪。

试试这个代码：

$(document).ready(function(){
    $.getJSON('countries.json', function(data) {
        for( index in data.countries ) {
            $('#countryBut ul').append('<li><a href="#" data-maker="'+data.countries[index].name+'">'+data.countries[index].name+'</a></li>');
        }
    });
});

这就是您的 JSON 的外观：

{
    "countries": [
        {
            "name":"Afghanistan"
        },
        {
            "name": "Albania"
        },
        {
            "name": "Argentina"
        },
        {
            "name": "United Kingdom"
        }
    ]
}

【讨论】：

是的。谢谢@JohnAnkanna
我已经尝试过了，但下拉菜单上仍然没有显示任何内容。但是感谢您的努力
那么对您来说最好的解决方案是使用开发人员工具，例如 Google chrome。如果您有任何问题，控制台会告诉您。这部分应该可以工作，但也许你在我们看不到的其他地方失败了。
我是否正确定位了 json 文件？它与 index.html 一起存储在根文件夹中
给我以下错误：jquery-1.12.3.min.js:4 XMLHttpRequest cannot load file:///C:/xampp/htdocs/Titan/countries.json。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。

【解决方案2】：

嘿，您的前端 html 文件，您忘记将类 dropdown 添加到 div，所以只需添加类，因为您使用 bootstrap 为 UI

<div class="btn-group dropdown" id="countryBut">

这样试试

$(document).ready(function(){
    $.getJSON('countries.json', function(data) {
            for( var index in data.countries ) {
        $('#countryBut ul').append('<li><a href="#" data-maker="'+data.countries[index].name+'">'+data.countries[index].name+'</a></li>');     }
    });
});

【讨论】：

谢谢，我认为我的 json 文件结构可能有问题。
@shaun 第一次使用变量时不要忘记在for loop 中使用var ......
@shaun 你确认数据正在加载使用console.log(data) 一次
是的，它正在加载，没有更多错误，但显示一个空的下拉列表。
@shaun 这是因为您忘记将结束 > 放置在锚标记中，并且您只分配给 data-maker 而不是 a 标记现在我编辑了代码只是检查一下跨度>

【解决方案3】：

json 文件现在看起来像这样：

"countries": [{
  "name": "Afghanistan"
}, {
  "name": "Albania"
}, {
  "name": "Argentina"
}, {
  "name": "United Kingdom"
}]

希望是现在。

【讨论】：

没有。检查我的第一个答案应该是什么样子。
它仍然说我的 country.js 文件格式不正确
你的也这么说

【解决方案4】：

Dropdown-when clicked.

点击就是这样，什么都不显示，json文件好像加载正常Json file-network

【讨论】：