Динамически заселить выбор опции с вложенной JSON

Question

Что я хочу достичь

У меня один статический HTML выберите параметры, эти параметры не изменяются, но буду определять, какие другой выход выберите коробки.

<select id="firstselectbox"> 
<option value="first">This is the first</option> 
<option value="second">This is the second</option> 
<option value="third">This is the third</option> 
<option value="fourth">This is the fourth</option> 
<option value="fifth">This is the fifth</option> 
</select> 

В настоящее время код я написал не хочет, чтобы вывести следующее:

Выбор 1: вариант выбран first

Выберите 2: проверяет JSon файл, находит первый и все узлов (второй слой) и перечислить их. Когда пользователь выбирает это.

Выберите 3: отображает третий слою

Пожалуйста, обратите внимание, что * является выбранным вариантом ниже - выберите 1 статичен и выберите 2 и 3 являются динамическими.

Select 1 Select 2 Select 3 
first*  London  Famous Famous 
second  Jersey  London Famous 
third  North* 
fourth  South East 
fifth  South West 
sixth  

Что я сделал до сих пор

var datajson = {"first":[{"jesery":[{"id":"jesery","name":"Jesery","jesery":[{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"second":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"third":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"forth":[{"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"fifth":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"southeast":[{"id":"southeast","name":"South East","southeast":[{"id":"distance","name":"Distance"}]}]}]} 

$("#firstselectbox").on('change', function() { 
    $("select#firstselectbox").html(''); 
     var locations = datajson[$(this).val()]; 
     var locationString = ''; 
    $.each(locations, function(i, item) { 

     console.log(locations[i]); 

     locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">' + locations[i].name + '</option>'; 
    }); 
    $('#secondselectbox').html(locationString); 
}); 

Issue?

Следующий код: locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">' + locations[i].name + '</option>'; Вывод unidentified.

Однако console.log(locations[i]); выводит массив, который выбран из поля статического выбора (первый, второй и т. Д.). Тем не менее, попытка отделить это, кажется, терпит неудачу.

Текущий код выводит unidentified.

Answer 1

Используйте ненавязчивый JavaScript, так что вам не придется охотиться ошибки, как это:

$('#secondselectbox').empty() 

$.each(locations, function(i, item) { 
    $("<option/>",{id:locations[i].id, value:locations[i].id, text:locations[i].name}) 
    .appendTo('#secondselectbox') 
}) 

Edit: Кроме того, существует проблема с вашей структурой JSON. У вас в основном есть массив, который содержит один объект, поэтому, когда вы выбираете массив, вы находитесь на одном уровне ниже, чем вам нужно.