从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中的错字吗？ 试用以下更新的代码，并附上注释以进行解释：

$.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>')
        });
    }
});