如何用HTML中的JSON外部文件填充下拉按钮

How to populate a dropdown button with JSON external file in HTML

本文关键字：填充 按钮 文件 外部 何用 HTML 中的 JSON      更新时间：2023-09-26

我是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部分有些奇怪。

试试这个代码：

$(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"
        }
    ]
}

json文件现在看起来是这样的：

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

希望现在就好。

单击时的下拉列表。

当我点击它时，它就是这样做的，不显示任何内容，json文件似乎加载了fineJson文件网络

嘿，你的前端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>');     }
    });
});
相关文章：