jQuery переключает div с помощью < select > поле
Не можете ли вы выполнить цикл только через нужный диапазон?
var startIndex = 4 // 5th element
for(var i=startIndex; i < results.length; i++) {
// (...)
}
1 ответ
Проблема с вашей текущей логикой заключается в том, что вы извлекаете строку из val() и сравниваете ее с int в switch, следовательно, блок default всегда выполняется, так как сравнение не удается. Чтобы исправить это, сравните со строкой или преобразуйте val() в int.
$(document).ready(function() {
$('#mySelect').change(function() {
let item1 = $("#item1");
let item2 = $("#item2");
let item3 = $("#item3");
switch ($('select[name=mySelect]').val()) {
case '1':
item1.show();
item2.hide();
item3.hide();
break;
case '2':
item1.hide();
item2.show();
item3.hide();
break;
case '3':
item1.hide();
item2.hide();
item3.show();
break;
default:
item1.hide();
item2.hide();
item3.hide();
break;
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" name="mySelect">
<option value="0" disabled selected>-- Select your item--</option>
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
</select>
<div id='item1'>
<p> contents
</div>
<div id='item2'>
<p> text2</p>
</div>
<div id='item3'>
<p> text3</p>
</div> Однако , вы можете достичь своей цели гораздо более скромным способом, поставив общий класс на всех элементах div, чтобы их можно было легко скрыть при изменении выделения. Затем вы можете построить строку селектора идентификатора, объединяя выбранное значение, например:
$(document).ready(function() {
$('#mySelect').change(function() {
$('.item').hide();
$('#item' + $(this).val()).show();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" name="mySelect">
<option value="0" disabled selected>-- Select your item--</option>
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
</select>
<div class="item" id="item1">
<p>contents</p>
</div>
<div class="item" id="item2">
<p>text2</p>
</div>
<div class="item" id="item3">
<p>text3</p>
</div> Обратите внимание, что вы не сможет выбрать ваш отключенный элемент option, поэтому нет необходимости снова показывать все элементы .item, как пытается сделать ваш блок default.