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"}]}]

为了填充我尝试这样的smth：

    $.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将是一个包含两个对象的数组，每个对象具有三个属性：value，title和models。每个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>')
        });
    }
});

从json填充下拉列表

1 个答案: