从 json 填充下拉列表

Question

我正在尝试将父/子下拉列表填充到我的 HTML 表单中。下拉列表必须包含从如下所示的 json 文件加载的汽车/模型：

[{"value":"ACURA","title":"Acura","models":
    [{"value":"CL_MODELS","title":"CL Models (4)"},
    {"value":"2.2CL","title":" - 2.2CL"},
    {"value":"2.3CL","title":" - 2.3CL"},
    {"value":"MDX","title":"MDX"},
    {"value":"NSX","title":"NSX"},
    {"value":"RDX","title":"RDX"},
    {"value":"ACUOTH","title":"Other Acura Models"}]},
{"value":"ALFA","title":"Alfa Romeo","models":[{"value":"ALFA164","title":"164"},
    {"value":"ALFA8C","title":"8C Competizione"},
    {"value":"ALFAGT","title":"GTV-6"},
    {"value":"MIL","title":"Milano"},
    {"value":"SPID","title":"Spider"},
    {"value":"ALFAOTH","title":"Other Alfa Romeo Models"}]}]

为了填充，我正在尝试这样的事情：

    $.getJSON("textfile.txt", function( json )
    $.each(json, function(key, value) {
    $('select[name=cars]').append('<option value="' + key + '">' + json[key] + '</option>');
}); 



<select name="cars"></select>
<select name="models"></select>

但它甚至不想向我展示模型剩下的汽车......我假设，我没有正确导航它，因为从示例中我得到这个代码它工作正常，我从这里得到https://www.techenclave.com/community/threads/populate-a-drop-down-list-from-a-text-file.147816/

我希望这些信息足够了。提前谢谢你！

Answer 1

这是您的 JavaScript 中的拼写错误吗？试试这个更新的代码，用 cmets 解释一下：

$.getJSON("textfile.txt", function( json ) {  // Missing this curly brace.
  $.each(json, function(key, value) {
    // Change key and json[key] to json[key].value and json[key].title
    $('select[name=cars]').append('<option value="' + json[key].value + '">' + json[key].title + '</option>');
  }); 
});  // Are you missing this as well?

尝试使用 Chrome 控制台 (F12) 或 Firebug 来检查 JavaScript 错误。您也可以尝试console.log(json) 来验证您是否真的从您的服务器获得了您所期望的。

请注意，在您的示例中，json 将是一个包含两个对象的数组，每个对象具有三个属性：值、标题和模型。每个models 属性依次是一个对象数组，每个对象都有两个属性，值和标题。

只是为了好玩，我决定为您构建一些额外的代码。你可以在这里看到完整的小提琴：https://jsfiddle.net/zzr9om38/

$.each(json, function(key, data) {
    $('select[name=cars]').append('<option value="' + json[key].value + '" data-index="'+key+'">' + json[key].title + '</option>')
});

$('select[name=cars]').change(function(obj){
    var selectedIndex = $(this).find(":selected").attr("data-index");
    $('select[name=models]').find("option:gt(0)").remove();
    if(selectedIndex != undefined) {
        $.each(json[selectedIndex].models, function(key, data) {
            $('select[name=models]').append('<option value="' + json[selectedIndex].models[key].value + '">' + json[selectedIndex].models[key].title + '</option>')
        });
    }
});