Question

我正在使用“ Select2”创建我的下拉选项。根据之前的下拉列表中的选择填充我的从属下拉列表。但是已经意识到“ .hide”选项不适用于Select2。

对此（Hide/Remove and Show/Restore options in a Select2 dropdown box）进行了研究，使我意识到我们必须使用'。prop（'disabled'，'true'）'。以及以下CSS：

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

尽管这隐藏了选项，但是当我应用过滤器然后使用'。prop（'disabled'，'false'）'允许过滤的结果显示在下拉列表中时，它似乎不起作用。我还改用了 .removeAttr（'disabled'），但是由于某些原因，它也不起作用。

在删除“ disabled”属性后，我还尝试过重新初始化“ select2”，但这似乎也不起作用。

以下是我用来过滤下拉菜单的先前选择的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/

我还尝试了其他插件，例如“选择并引导”多选功能，但我知道此问题在所有插件上仍然存在。

如果有人能告诉我上述代码在哪里出问题，我将深表感激。

Select2-显示隐藏下拉选项的问题基于先前的选择

0 个答案: