Как сделать AJAX подзагрузку списка городов и станций метро в зависимые select списки по API?

Question

[Gera11]

Есть API список городов России и станций метро из каждого города.
Как с помощью jquery принимать данные из этого api и выводить в первый select список городов, а после выбора города, во второй список все станции метро из этого города?

Comments

[0xD34F]

А где же результаты попыток решить проблему самостоятельно? Неужто всё как обычно - никаких попыток не было, очередное "сделайте мне"?

[Gera11]

0xD34F, Вот тут в ответе был вариант, я пытался скрестить эти два кода, но понимал что делаю что-то очень тупо и вообще бред получался даже близко не похожий на то что нужно

[0xD34F]

Gera11

я пытался

Повторяю - результат этого "пытался" где?

понимал что делаю что-то очень тупо и вообще бред получался даже близко не похожий на то что нужно

Зачем пояснять очевидное? Мне о твоей профнепригодности прекрасно известно.

[0xD34F]

Gera11, не-а, не потеряюсь. Когда тебе указывают на недостаток в оформлении вопроса - его надо исправлять, а не огрызаться.

Кстати, вот ещё один: лишние тэги. Из трёх, что есть сейчас, достаточно одного.

[Lynatik001]

JhaoDa, 0xD34F, кста часть считай рабочего решения он ниже скинул. даже не лайкнул не отметил решением, не сказал спасибо. эх, зачем я тогда это писал) Дурак наверное.

Answer 1

[0xD34F]

<label>
  Город:
  <select id="city"></select>
</label>
<label>
  Линия:
  <select id="line"></select>
</label>
<label>
  Станция:
  <select id="station"></select>
</label>

fetch('https://api.hh.ru/metro/').then(r => r.json()).then(subwayData => {
  const city = document.querySelector('#city');
  const line = document.querySelector('#line');
  const station = document.querySelector('#station');

  const getLines = () => subwayData[city.value].lines;
  const update = (el, data) => {
    el.replaceChildren(...data.map((n, i) => new Option(n.name, i)));
    el.dispatchEvent(new Event('change'));
  };

  city.addEventListener('change', () => update(line, getLines()));
  line.addEventListener('change', () => update(station, getLines()[line.value].stations));

  update(city, subwayData);
});

Answer 2

[Lynatik001]

Вот рабочий пример на чистом яваскрипте. для удобной выборки и тд используйте ajson = await response.json; - парсить в формате json

await response.text(); - используется, что бы наглядно было в консоли что все ловит и выводит.
async function ad(){
    let response = await fetch('https://api.hh.ru/areas/113');

    if (response.ok) { // если HTTP-статус в диапазоне 200-299
      // получаем тело ответа
      ajson = await response.text();
      console.log(ajson);
      console.log('a');
    } else {
      alert("Ошибка HTTP: " + response.status);
      
    }
}

Увы далее сами. делайте. или попросите кого, конечно с вонаграждением в виде денег, ведь любой труд должен быть оплачен. Не стоит придерживатся детской логике, что все тебе должны)