Question

我正在尝试使用JSON在bootstrap下拉菜单中填充UL列表。这是引导程序菜单：

<section class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Select A State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
</ul>
</section>

这是JSON：

//Create json list of dropdown
var jsonList = {"List" : [
    {"id" : "al", "Name" : "AL"},
    {"id" : "ak", "Name" : "AK"},
    {"id" : "az", "Name" : "AZ"}
]}

//Populate dropdown menu for selection of dropdown
$(document).ready(function(){
    var listItems = "";
        for (var i = 0; i < jsonList.List.length; i++){
        listItems += "<li><a href='#'>" + jsonList.List[i].id + "'>" + jsonList.List[i].Name + "</a></li>";
    }
    $("#dropdown-menu").append(listItems);
});

我不知道我是否正确设置我的引用，或者我是否使用了正确的语法。

Answer 1

有一个格式错误的锚标记：

listItems += "<li><a href='url/to/" + jsonList.List[i].id + "'>" + jsonList.List[i].Name + "</a></li>";（删除双关角度支架）

下拉选择器也是一个类选择器

$(".dropdown-menu").html(listItems);

使用JSON填充UL

1 个答案: