0

Добрые день. Задача заключается в следующем. Необходимо чтобы контент (а именно: адреса, номера телефонов и карта) менялись в зависимости от выбранного города. Перелопатил кучу готовых решений и не один не подходит. Ибо где то данные берутся из самих переключателей, а не из дивов. Где-то выбранный город не скрывается из списка и т.п. Подскажите, как подобное реализовать.

3
  • Пока вас не заминусовали полностью, рекомендую показать ваш код. И заодно поясните, что значит «данные берутся из самих переключателей, а не из дивов», потому как на первый взгляд это правильное поведение. 4 сен 2018 в 12:23
  • Собственно код взят отсюда - ru.stackoverflow.com/a/503342
    – Soul
    4 сен 2018 в 13:45
  • Модернизацию кода не вносил. По поводу второго вопроса. На выходе будет отображаться содержимое этого переключателя <li data-phone="01" data-mail="[email protected]">link 1</li>. Т.е. 01 [email protected] В моем же случаи необходимо прятать и отображать целый див, где кучу вложений. Надеюсь понятно объяснил. Извиняюсь что ответ в 2 комментария.
    – Soul
    4 сен 2018 в 13:51

1 ответ 1

1

Обратите внимание, что контент не скрывается стилями изначально, а уже после инициализации это происходит при помощи яваскрипта — так стоит делать потому, что не всегда яваскрипт включен, а это не должно влиять на доступность контента.

Также обратите внимание, что скрытие контента происходит при помощи паттерна visually hidden — так, опять же, контент остается доступным для пользователей с альтернативными устройствами считывания информации.

В остальном, довольно тривиальный скрипт: скрываем при инициализации все блоки контента, кроме первого; при переключении селекта берем число из его текущего значения и показываем див с соответствующим айди.

const contentBlocks = document.querySelectorAll('.content')
const selectBlock = document.querySelector('.choose')

hideBlocks(contentBlocks)
contentBlocks[0].classList.remove('visually-hidden')

selectBlock.addEventListener('change', function () {
  const idNum = this.value.split('-')
  hideBlocks(contentBlocks)
  document.querySelector('#info-' + idNum[1]).classList.remove('visually-hidden')
})

function hideBlocks (blocks) {
  for (let block of blocks) {
    block.classList.add('visually-hidden')
  }
}
.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}
<select class="choose">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
</select>

<p id="info-1" class="content">
  content 1
</p>
<p id="info-2" class="content">
  content 2
</p>
<p id="info-3" class="content">
  content 3
</p>

5
  • Спасибо большое. То, что нужно.
    – Soul
    5 сен 2018 в 10:55
  • А как сделать чтобы выбранный "город" скрывался из списка?
    – Soul
    5 сен 2018 в 13:50
  • не очень понял вопрос, что именно скрывать надо? 5 сен 2018 в 13:53
  • Например, выбран селектор 1 - его и скрываем из списка. Выбран селектор 2 - его скрываем из списка и т.п.
    – Soul
    6 сен 2018 в 6:07
  • во время инициализации и изменения вам надо сравнить текущий value селекта с каждым value всех его дочерних option и скрывать их, а также не забыть показывать все остальные. 6 сен 2018 в 11:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.