Несколько Select на странице

149

09 сентября 2021, 00:20

имеется несколько select обернутых в div на странице, необходимо чтобы при выборе внутри рядом стоящего div отображалась информация... Долго не думая написал вот так... Проблема в том, что .change срабатывает только у первого div с select, а таких много. Может неправильно скрипт написал?

  <select class="custom-select" id="select-names">
        <option value="22">Миша</option>
  </select>
  <div class="tab-content" id="names-info-content">
  <div class="tab-pane" id="tab-22">
        <a class="text-dark" href="#">Мишка</a>
        <small class="text-muted">Очень хороший</small>
  </div>
  </div>
<script>
$('#names-info-content > div:first-child').addClass('active')

$('#select-names').change(function () {
    dropdown = $('#select-names').val();
    $('#' + "tab-" + dropdown).addClass('active').siblings().removeClass('active');         
});
</script>

Answer 1

$('#names-info-content > div:first-child').addClass('active') 
 
 
$('#select-names').change(function() { 
  let dropdown = $(this).val(); 
  $('#' + "tab-" + dropdown).addClass('active').siblings().removeClass('active'); 
});

.active { 
  background-color: green; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select class="custom-select" id="select-names"> 
  <option value="22">Миша</option> 
  <option value="23">Петя</option> 
  <option value="24">Вася</option> 
</select> 
 
<div class="tab-content" id="names-info-content"> 
  <div class="tab-pane" id="tab-22"> 
    <a class="text-dark" href="#">Мишка</a> 
    <small class="text-muted">Очень хороший</small> 
  </div> 
  <div class="tab-pane" id="tab-23"> 
    <a class="text-dark" href="#">Петя</a> 
    <small class="text-muted">Нормальный</small> 
  </div> 
  <div class="tab-pane" id="tab-24"> 
    <a class="text-dark" href="#">Вася</a> 
    <small class="text-muted">Потянет</small> 
  </div> 
</div>

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Поиск в древовидной структуре

Опытные коллеги кто сталкивался с такой древовидной структурой Bootstrap tree view как лучше всего организовать по ней поиск, если дерево очень большое,...

203

jQuery

Cкрыть и показать картинку при клике

есть 4 блока в каждом из которых находится картинкаКаким образом можно сделать так чтобы изначально не было видно изображений во всех четырех...

105

HTML

Как правильно использовать созданный в css треугольник?

Мне нужно сделать 4 треугольника в css, я делаю их через border примерно так:

225

HTML

абсолютное позиционирование блока, css

Не могу отпозиционировать блок (item) относительно именно тега bodyПроблема в том, что элементы block__2 и block__3 имеют свойство position:relative; И получается...

117