Есть селект с 3-мя option и блок с вложенными 3 блоками. Как мне показывать вложенный блок 1 если выбран первый option и т.д. ?
Мне как бы нужно брать индекс option и под таким же индексом показывать.
Я взял код от табов JQ и попытался его переделать под селект. Но толи this не срабатывает, толи индекс не определяется. Подскажите куда обратить внимание?
$('select').on('change', function () {
$(this)
.closest('.wrapper').find('.block').removeClass('active').eq($(this).index()).addClass('active');
});
.hero-apartment__img {
displa: none;
}
.hero-apartment__img.active {
display: block;
}
.block {
display: none;
width: 150px;
height: 150px;
border: 1px solid;
}
.block.active {
display: block;
}
.inner {
display: none;
box-sizing: border-box;
margin-bottom: 5px;
width: 20px;
height: 20px;
padding: 10px;
background-color:red;
}
.inner.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div class="wrapper">
<div class="block active">
<div class="inner active"> <span>1</span></div>
<div class="inner"> <span>2</span></div>
<div class="inner"> <span>3</span></div>
</div>
<div class="block">
<div class="inner"> <span>1</span></div>
<div class="inner"> <span>2</span></div>
<div class="inner"> <span>3</span></div>
</div>
<div class="block">
<div class="inner"> <span>1</span></div>
<div class="inner"> <span>2</span></div>
<div class="inner"> <span>3</span></div>
</div>
</div>
.block
и какой блок.inner
в блоке нужно показать если выбрано 2 ? – Alex 27 мар '19 в 13:17