Как при выборе значения Select показывать или скрывать блок?

Question

[focusss]

Есть select, при клике которого я получаю его значение 1, 2, 3 и хочу показать блок в том же порядке.

<select name="Selectmenu" class="evidence-select">
     <option value="1">Один</option>
     <option value="2">Два</option>
     <option value="3">Три</option>
</select>

 <div class="evidence-content">Один</div>
 <div class="evidence-content">Два</div>
 <div class="evidence-content">Три</div>

$(document).ready(function($) {
  $('.evidence-content').hide(); //скрылл всё
  $('.evidence-content:first').show(); //показываю первый блок

  $('.evidence-select').click(function () {
    var i = $(this).val(); //после клика по селекту получил его значение в переменную
    //вот тут уже туплю
    
  })
});

То есть, хочу при клике на option со значением 2, чтоб показался div со значением ДВА, а остальные скрывались. И т.д.

Comments

[Илья Прыгунов]

Уже подзабыл джэйквери, но вроде что то вроде этого

let elements = $('.evidence-content');
$('.evidence-select').click(function () {
let i = $(this).val(); //
for (let k in elements) {
if (k === i) elements ) {
elements [i].show();
continue;
}
elemets[k].hide();
}
})

[focusss]

eliasj, Пытался так же, выдаёт ошибку - Uncaught TypeError: $(...)[i].show is not a function

[Илья Прыгунов]

focusss, не забыли круглые скопки у show()?

Answer 1

[Сергей Соколов]

Можно сделать функцию, которая будет проходить по этим блокам и прятать все / показывать нужный.
Вызывать её при каждом изменении селекта, ну и в самом начале.

Comments

[focusss]

Спасибо, прям то что нужно.

[Сергей Соколов]

focusss, p.s. в ответе вариант без jQuery, на чистом JS.
С jQuery вышло не намного короче:

const selector = $('.evidence-select');

function update() {
  const value = selector.val();
  const theIndex = parseInt(value) - 1;
  
  $('.evidence-content').each(function(index, el) {
    $(el)[index === theIndex ? 'show' : 'hide']();
  });

};

selector.on('click', update);
update();

[Антон Вебсайтовский]

Сергей Соколов, спасибо, работает.