javascript - 使用 JSON 通过 jQuery 填充 UL

标签 javascript jquery html asp.net-mvc json

这是我的 JSON 数据

[
    {"CountyId":2,"Name":"Snohomish","StateId":1,"State":null,"Plans":null},    
    {"CountyId":1,"Name":"Whatcom","StateId":1,"State":null,"Plans":null}
]

我正在尝试用这些数据在我的网页上填充一个 UL。

function loadSavedCounties() {
    $.post("/Plans/GetPlanCounties/",
        { planId: $("#PlanId").val() },
        function (data) {
            populateSavedCounties($("#SavedCounties"), data);
        }
    );
}
function populateSavedCounties(select, data) {
    select.html('');
    var items = [];
    $.each(data, function (id, option) {
        items.push('<li>' + option.Name + '</li>');
    });  
    select.append(items.join(''));
}

我知道我正在成功调用 loadSavedQueries(),因为我的 UL 正在被 select.html('') 调用清除。但是没有任何元素被放回 UL。

更新...

在明显的修复和更改不起作用之后,我在 Controller 中发现了一个问题,它没有抛出错误,但基本上返回空的 JSON 对象。一旦我发现了这一点,数据就开始向下流动,建议的更改起到了作用。

最佳答案

您可以在最后设置 UL 的 html - 无需先清除它:

function populateSavedCounties(select, data) {
    var items = [];
    $.each(data, function (id, option) {
        items.push('<li>' + option.Name + '</li>');
    });  
    select.html(items.join(''));
}

关于javascript - 使用 JSON 通过 jQuery 填充 UL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12847972/

相关文章:

javascript - Angular 选择不填充选项

javascript - 在移动设备上显示内容并在桌面上隐藏

jquery - 尝试使用 jquery 循环幻灯片调整窗口大小

javascript - 如何防止多次播放动画 - Jquery

jquery - jQuery 滚动顶部动画

html - 显示:flex 属性无法在 Internet Explorer 中正确呈现

javascript - 获取没有索引号的 json_encode 数据

javascript - 如果页面 URL 包含查询,请执行某些操作

html - 将元素水平并排放置 HTML

html - 自定义字体无法在 Windows (Chrome) 上正确显示