Наполнения выпадающего списка из JSON

Question

Я пытаюсь заполнить списки родителя/ребенок выпадающих в мой HTML списки form.The раскрывающихся должен содержать автомобили/модель, которые загружаются из 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> 

Но он даже не хочет, чтобы показать мне, что осталось автомобили для моделей ... Я предполагаю, что я не плыву его правильно, beacuse из примера, я получил этот код, он работает правильно, который я получил отсюда 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>') 
     }); 
    } 
});