Блог

Главная - Вопросы по программированию - Как отключить функцию выбора для всех выборок

Как отключить функцию выбора для всех выборок

#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>