Select2 - проблема с раскрывающимися опциями показа-скрытия на основе предыдущих выборов - PullRequest
Новая
       34

Select2 - проблема с раскрывающимися опциями показа-скрытия на основе предыдущих выборов

0 голосов
/ 24 мая 2019

Я использую «Select2» для создания опций выпадающего меню. Мой зависимый выпадающий список заполняется на основе выборов в моих предыдущих выпадающих списках. Но поняли, что опция «.hide» не работает с Select2.

Исследование этого ( Скрыть / Удалить и Показать / Восстановить опции в выпадающем списке Select2 ) заставило меня понять, что мы должны использовать '. Prop (' disabled ',' true ' ) '. вместе со следующим css: 

.select2-results .select2-disabled,  .select2-results__option[aria-disabled=true] { display: none;}

Хотя это скрывает параметры, однако, когда я применяю фильтр и затем использую '. Prop (' disabled ',' false ')' , чтобы разрешить отображение отфильтрованных результатов в раскрывающемся списке, не похоже на работу. Вместо этого я также использовал .removeAttr ('отключено') , но по какой-то причине это тоже не работает.

Я также попытался повторно инициализировать «select2» после удаления атрибута «disabled», но это также, похоже, не работает.

Ниже приведен jQuery, который я использую для фильтрации из выпадающего списка предыдущих выборов: 

jQuery(document).ready(function($) {
    $("#SelectPhone").val([]);
    $('#SelectPhone option').prop('disabled', 'true'); // <-- Using .prop to disable all options

    jQuery("#PhoneType").on('change', function() {
    if ( this.value == "FeaturePhone")
      {
        jQuery("#FeaturePhone").show();
        jQuery("#FeaturePhoneFeature, #AllPhoneFeature, #SelectPhone").val(null).trigger('change');

        $("#FeaturePhoneFeature, #AllPhoneFeature").on("change", function() {

        $('#SelectPhone option')
        .filter('option[value^='+ '\"' + $('#PhoneType').val() + '.' + $('#FeaturePhoneFeature').val() + '.' + $('#AllPhoneFeature').val()+'\"' + ']'+'')
        .prop('disabled', 'false'); // <-- Using .prop to enable filtered options

        $("#SelectPhone").select2({ width: '100%' });
        $("#SelectPhone").val([]);
        });
}
      else
      {
        jQuery("#FeaturePhone").hide();
        jQuery("#AllPhoneFeature, #SelectPhone").val(null).trigger('change');

        $("#AllPhoneFeature").on("change", function() {

        $('#SelectPhone option')
        .filter('option[value^='+ '\"' + $("#PhoneType").val() + '.' + $('#AllPhoneFeature').val()+ '\"' + ']'+'')
        .prop('disabled', 'false'); // <-- Using .prop to enable filtered options

        $("#SelectPhone").select2({ width: '100%' });
        $("#SelectPhone").val([]);
        });
}
    });
});

Ниже приведен рабочий jsfiddle с полным кодом. https://jsfiddle.net/t0pjy7cd/1/

Я также пробовал другие плагины, такие как Chose & Bootstrap multiselect, но я понимаю, что эта проблема сохраняется на всех плагинах.

Буду очень признателен, если кто-нибудь скажет мне, где я ошибаюсь с приведенным выше кодом, поскольку я застрял на этом этапе.

...