javascript - $.ajax json 下拉菜单项

Question

我正在尝试使用 json 进行下拉列表。

json:

[["a","Apple"],["b", "Berry"]]

JavaScript:

$.ajax({url:'fruit.json'}).done(function(data) { 
    var items = '<option value="" selected>Select</option>';
    $.each(data, function(i, val) {
        items += '<option value= "'+val[0]+'" > '+val[1]+' </option>';
    });
    $('#menu').html(items);
    console.log(items); //shows values correctly
});

html:

<script type="text/template" id="menuScriptWrapper">
    <select id="menu"></select>
</script>

为什么项目没有填充到下拉菜单中？

Answer 1

我按照你的指示实现了一个 fiddle ，为了简单起见，跳过了ajax层(无论如何，如果你的控制台日志显示你的预期值ajax应该没问题)

Javascript:

var f = function(data) {
        console.log(data);
    var items = '<option value="" selected>Select</option>';
    $.each(data, function(i, val) {
        items += '<option value= "'+val[0]+'" > '+val[1]+' </option>';
    });
    $('#menu').html(items);
    console.log(items); //shows values correctly
};

f(([["a","Apple"],["b", "Berry"]]));

HTML

<select id="menu"/>

Fiddle

一切看起来都很好。我想说你的问题出在页面的其他地方。我会仔细检查您的菜单选择器...还要检查您是否有多个带有 id="menu" 属性的标签