select2 multiselect параметры фильтра на основе предыдущих выборов

Question

Я реализую select2 multiselect для выбора между несколькими компетенциями. Компетенции имеют два слегка разных шкалы оценки.

Скажем, что «Программирование», «Общее решение проблем» и «Скорость» используют Scale1; и «Интеллект», «Изменение пропозиции» и «Анализ затрат» используют Scale2. Я бы хотел, чтобы мой select2 показывал все 6 вариантов, но как только я выбрал один из них, дальнейший отбор разрешен только по компетенциям, использующим один и тот же масштаб оценки.

Как я могу это достичь?

Answer 1

Вот как я решил.

My select2 инициализируется существующим выбором с параметрами. Поэтому прежде всего я добавил новый атрибут к параметрам, которые представляют строку, которую я хочу фильтровать (в моем случае это «масштаб», в примере, который я представил в комментариях, будет «animalGroup»).

Затем я создал слушатель изменения событий на оригинальном выбор:

select.on('change', function() { 
     var currItems = $(this).val(); 

     $(this).find('option').prop('disabled', false); 

     if (!(currItems == null || currItems === false)) { 

      var currScale = $(this).find("option[value='" + currItems[0] + "']").attr('scale'); 

      $(this).find('option').prop('disabled', false); 
      $(this).find("option[scale='" + currItems[0] + "']").prop('disabled', false);; 


      $(this).parent().find('option').each(function() { 
       if (($(this).attr('scale') != currScale)) $(this).prop('disabled', true); 
      }); 


     } 

     $(this).select2({ 
      allowClear: true, 
     }); 
    }); 

В позволяют все опции, а затем, если выбран по меньшей мере, один параметр, отключает все параметры, которые используют другой масштаб (или animalGroup). В конце select2 повторно инициализируется, чтобы поймать изменения в включенном/отключенном.