Первый вариант: может выполнить только один запрос, но загружает не все данные, которые не нужны. второй вариант: делает больше запросов, но меньше данных

аюсь заполнить цепочки выпадающих списков State City. Для этого я использую внешний файл json, который состоит из штата и соответствующего названия города, идентификатора и пин-кода. Может кто-нибудь дать мне идею о том, как этого добиться. Мне нужно заполнить город и значение пин-кода на основе выбора штата. Заранее спасибо...

JSON
{
"Alaska" : [
            {"id": "1", "name": "Adak", "pincode": "xxx1"},
            {"id": "2", "name": "Akhiok", "pincode": "xxx2" },
            {"id": "3", "name": "Akiak", "pincode": "xxx3" },           
       ],

"Arizona" : [
            {"id": "4", "name": "Apache Junction", "pincode": "xxx4"},
            {"id": "5", "name": "Avondale", "pincode": "xxx5"},
            {"id": "6", "name": "Benson", "pincode": "xxx6"},
        ],

"Alabama" : [
            {"id" : "5", "name": "Abbeville", "pincode": "xxx7" },
            {"id" : "7", "name": "Adamsville", "pincode": "xxx8" },
            {"id" : "8", "name": "Akron", "pincode": "xxx9" },
        ]
}
Окончательный рендеринг HTML
<select id="state">
      <option value="1">Alaska</option>
      <option value="2">Arizona</option>
      <option value="3">Alabama</option>
      </select>

      <select id="city">
      <option value="4">Adak</option>
      <option value="5">Akhiok</option>
      <option value="6">Akiak</option>
      </select>

      <input id="pincode" type="text" />

Ответы на вопрос(2)

Ваш ответ на вопрос