Как отобразить атрибут Json для динамического формирования после выбора некоторых критериев

Question

В основном я пытаюсь сделать следующее: создать динамический выпадающий список для Area => City => Neighborhood => Block + взять значение почтового индекса из Json для выбранного блока и опубликовать все эти значения в результате моей формы.

До сих пор мне удалось прочитать данные из Json для Area => City => Neighborhood => Block, но я не знаю, как достичь значения почтового индекса и поместить его в мою форму.

Код, который у меня есть (работает правильно, не знаю, как отобразить почтовый индекс для выбора блока).

Я не знаю, с чего начать, чтобы использовать идентификатор соседства и поставить его почтовый индексэто до последнего выбора.

--- html ---

<label>Area:</label>
<select id="area" name="area">
<option value="000">-Choose area-</option>
</select>

<label>City:</label>
<select id="city" name="city">
<option value="000">-Choose city-</option>
</select>

<label>Neighbourhood:</label>
<select id="hood" name="hood">
<option value="000">-Choose Neighbourhood-</option>
</select>   

<label>Block:</label>
<select id="block" name="block">
<option value="000">-Choose block-</option>
</select>

<label>Postal code:</label>
<select id="postal" name="postal">
<option value="postal_no">-Postal code is-</option>
</select>

--- script ---

var myJson = {
    "area": [{"name": "Area 1","id": "a1","cities": [{ "name": "City 1", "id": "C1", "neighbourhoods": [{ "name": "Neighbourhood 1", "id": "N1", "blocks": [     {"name": "N1 Block 1", "id": "N1B1", "postal_code": "10355"}, { "name": "N1 Block 2", "id": "N1B2", "postal_code": "10555"}]}, {"name": "Neighbourhood 2","id": "N2","blocks": [{ "name": "N2 Block 1", "id": "N2B1", "postal_code": "10257"}, {"name": "N2 Block 2", "id": "N2B2", "postal_code": "10357"} ]},             {"name": "Neighbourhood 3", "id": "N3", "blocks": [{ "name": "N3 Block 1", "id": "N3B1","postal_code": "10000"} ]}]}, { "name": "City 2", "id": "C2", "neighbourhoods" : ""}   ]}]};   

$.each(myJson.area, function (index, value) {

var area_id;
var city_id;
var hood_id;
var block_id;

$("#area").append('<option rel="' + index + '" value= "'+value.id+'" > '+value.name+' </option>');

$("#area").change(function () {
   $("#city, #hood, #block").find("option:gt(0)").remove();
   $("#city").find("option:first").text("Loading...");

   area_id = $(this).find('option:selected').attr('rel');
   console.log("area INDEX : " + area_id);

   $.each(myJson.area[area_id].cities, function (index1, value1) {
   $("#city").find("option:first").text("Choose city");
   $("#city").append ('<option rel="' + index1 + '" value = "'+value1.id+'"> '+value1.name+' </option>');
});

});
$("#city").change(function () {
    $("#hood, #block").find("option:gt(0)").remove();
    $("#hood").find("option:first").text("Loading...");

    city_id = $(this).find('option:selected').attr('rel');
    console.log("city INDEX : " + city_id);

    $.each(myJson.area[area_id].cities[city_id].neighbourhoods, function (index2, value2) {
    $("#hood").find("option:first").text("Choose neighbourhood");
    $("#hood").append('<option rel="' + index2 + '" value="'+value2.id+'">'+value2.name+'</option>');
});            

});

$("#hood").change(function () {
    $("#block").find("option:gt(0)").remove();
    $("#block").find("option:first").text("Loading...");

    hood_id = $(this).find('option:selected').attr('rel');
    console.log("hood INDEX : " + hood_id);

   $.each(myJson.area[area_id].cities[city_id].neighbourhoods[hood_id].blocks, function (index2, value2) {
   $("#block").find("option:first").text("Choose block");
   $("#block").append('<option rel="' + index2 + '" value="'+value2.id+'">'+value2.name+'</option>');   
});

}); 

});