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