Задать вопрос
mrusklon
@mrusklon
Не получается? Яростно гугли!

Как отобразить содержимое в зависимости от выбора select?

https://codepen.io/mrusklon/pen/zMQeoG

задачка такая , хочу при выборе в select "subCat1" , отобразить на экране содержимое "sub1" , цифры у них одинаковые будут

я примерно понимаю что надо как то брать название класса того select который я выбрал , затем смотреть его "номер" ,
а дальше искать другой класс в соседнем блоке , смотреть на их номера ...
что то я запутался :)
  • Вопрос задан
  • 101 просмотр
Подписаться 1 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Родительскому блоку дополнительного содержимого добавьте какой-нибудь класс, чтобы к нему напрямую обращаться можно было, типа class="subs", например.

$('select').change(function() {
  $('.subs [class*="sub"]')
    .addClass('hidden')
    .filter(`.sub${$(this).val()}`)
    .removeClass('hidden');
});

// или

$('select').change(function(e) {
  const index = ($(e.target).prop('selectedIndex') || Infinity) - 1;
  this.addClass('hidden');
  this.eq(index).removeClass('hidden');
}.bind($('.subs').children()));

или

document.querySelector('select').addEventListener('change', e => {
  const cls = `sub${e.target.value}`;
  document.querySelectorAll('.subs [class*="sub"]').forEach(n => {
    n.classList.toggle('hidden', !n.classList.contains(cls));
  });
});

// или

document.querySelector('select').addEventListener('change', e => {
  const index = ~-e.target.selectedIndex;
  Array.prototype.forEach.call(
    document.querySelector('.subs').children,
    (n, i) => n.classList.toggle('hidden', i !== index)
  );
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Acaweb
@Acaweb
Начинающий Вэб-разработчик
Вопрос вообще не понятен. Напиши код HTML и что нужно сделать
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы