#javascript #html #jquery #select
#javascript #HTML #jquery #выберите
Вопрос:
Я работаю над страницей, где у меня есть несколько выборок.
Для одного из них (назовем его «select-1») У меня есть функция, которая скрывает / показывает содержимое div, и внутри этого содержимого div у меня также есть выбор (назовем его «select-2»).
Итак, моя проблема в том, что когда я использую этот «select-2», он запускает мою функцию.
Я ищу способ запустить эту функцию только для «select-1». Я перепробовал много материалов, но я не очень разбираюсь в Jquery, поэтому это не работает.
Вот функция :
function func(select){
$(select).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".list").not("." optionValue).hide();
$("." optionValue).show();
$(".targetDiv").not("." optionValue).hide();
$("." optionValue).show();
} else{
$(".list").hide();
}
});
}
Комментарии:
1. Пожалуйста, включите весь соответствующий HTML-код
2. Как вы вызываете
func
?3. Также, предполагая, что это
<select id="select-1">
, просто используйте$("#select-1")
для ссылки на нее и только на нее.
Ответ №1:
Следующий HTML не будет соответствовать вашему, поскольку вы не показали ни одного, но концепцию будет легко адаптировать к вашей.
Для multiple
выбора jQuery val()
возвращает массив всех выбранных значений.
Используя атрибут данных для элементов содержимого и filter()
мы можем сначала скрыть все элементы, а затем отфильтровать те, которые находятся в массиве значений, для отображения
// only target select-1 with event listener
$('#select-1').change(function() {
const valArray = $(this).val();
const $list = $('.list').hide(); // hide whole collection
if (valArray.length) {
// when options selected filter the ones to show
$list.filter(function() {
return valArray.includes($(this).data('item'));
}).show()
}
});
.list{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select 1
<select id="select-1" multiple size="5">
<option value="">Select item</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
<h3>
List
</h3>
<ul>
<li class="list" data-item="one">One</li>
<li class="list" data-item="two">Two</li>
<li class="list" data-item="three">Three</li>
<li class="list" data-item="four">Four</li>
</ul>