как показывать содержание списка select в зависимости от выбранного другого select?

Question

Всем привет.
Как при выборе #choose_city показать только те .list_programs которые принадлежать данному городу?

<select name="choose_city" id="choose_city" class="form-control" type="text">
  <option selected disabled>Choose city</option>
  @foreach($cities as $city)
    <option value="{{$city->slug}}">{{$city->name}}</option>
  @endforeach
</select>

<select name="choose_program" id="choose_program" class="form-control" type="text">
  <option selected disabled>Choose program</option>
  @foreach($cities as $city) 
    @foreach($city->programs as $program)
      <option class="list_programs" value="{{$program->slug}}">{{$program->title}}</option>
    @endforeach 
  @endforeach
</select>

Answer 1

document.querySelector(".city-select").onchange = e => {
  const courseSelect = document.querySelector(".course-select");
  courseSelect.selectedIndex = 0;
  
  courseSelect.querySelectorAll("option").forEach(el => {
    if (!el.dataset.city || el.dataset.city === e.target.value) {
      el.removeAttribute("hidden");
    } else {
      el.setAttribute("hidden", true);
    }
  })
}

<select class="city-select">
  <option selected disabled>Выберите город</option>
  <option value="moscow">Москва</option>
  <option value="kiev">Киев</option>
  <option value="kazan">Казань</option>
</select>

<select class="course-select">
  <option selected disabled>Выберите курс</option>
  <option data-city="moscow" value="1">Курс 1</option>
  <option data-city="moscow" value="4">Курс 4</option>
  <option data-city="moscow" value="7">Курс 7</option>
  <option data-city="kiev" value="2">Курс 2</option>
  <option data-city="kiev" value="5">Курс 5</option>
  <option data-city="kiev" value="8">Курс 8</option>
  <option data-city="kazan" value="3">Курс 3</option>
  <option data-city="kazan" value="6">Курс 6</option>
  <option data-city="kazan" value="9">Курс 9</option>
</select>

БЛОГ НА HUSL

как показывать содержание списка select в зависимости от выбранного другого select?

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