как сделать выбор городов c выпадающим списком пренадлежащие к определенной области из json файла?

есть файл json https://api.hh.ru/areas/5

нужно чтобы на странице выпадающший список в котором все эти области клацаешь на область открывается список городов и уже выбираешь город

<select name="city" id="billing_city" class="country_to_state city_select " autocomplete="city" required>
      <option value="">Выбрать город</option>

</select>

спасибо


Ответы (1 шт):

Автор решения: Aziz Umarov

Если на скорую руку то можно так

let dataList = {};
fetch('https://api.hh.ru/areas/5').then( response=> {
 return response.json()
}).then(
 json=> {
  dataList = json;
  json.areas.forEach( area =>{
    var opt = document.createElement('option');
    opt.value = area.id;
    opt.innerHTML = area.name;
    billing_area.appendChild(opt);
    }
  );
 }
);


billing_area.addEventListener('change', () => {
  billing_city.innerHTML = '';
  dataList.areas.filter(item => item.id == billing_area.options[billing_area.selectedIndex].value)[0].areas.forEach(
    area=>{
      var opt = document.createElement('option');
      opt.value = area.id;
      opt.innerHTML = area.name;
      billing_city.appendChild(opt);
    }
  )

});
<select name="city" id="billing_area" class="country_to_state city_select " autocomplete="city" required>
      <option value="">Выбрать область</option>
</select>
<select name="city" id="billing_city" class="country_to_state city_select " autocomplete="city" required>
      <option value="">Выбрать город</option>
</select>

→ Ссылка