Jquery 更改值时隐藏Select2 Optgroup

我的选择列表中有2个选项组，我试图在选择车辆时显示一个选项组并隐藏另一个选项组

jQuerydocument.readyfunction{ jQuery“选择”。每个函数{ jQuerythis.select2； }; }; 汽车 自行车 川崎 铃木 迈凯轮 法拉利

---

您可以尝试侦听所选选项的值，并基于该值操纵结果，例如：

jQuerydocument.readyfunction{ jQuery“选择”。每个函数{ jQuerythis.select2； $“车辆”。更改功能{ 如果$this.val=='car'{ $‘bike’。移除； } }; }; }; 汽车 自行车 川崎 铃木 迈凯轮 法拉利

---

如果您只是禁用这些选项而不是删除它们，可能会更好，而且用户友好程度会稍微高一些。Select2本身也支持这一点，因此用户将无法选择禁用的选项

jQuerydocument.readyfunction{ jQuery“选择”。每个函数{ jQuerythis.select2； }; jQuery'vehicle'。关于'change'，函数{ 如果$this.val=='car'{ $“汽车-自行车选项”。道具“禁用”，正确； $'car-car option'.prop'disabled'，false； }否则{ $“汽车-自行车选项”。道具“已禁用”，错误； $'car-car option'.prop'disabled'，true； } //告诉Select2更新当前选择 //如果禁用了选定选项，某些浏览器会正确切换该选项 //其他人没有，这是不幸的 $‘汽车’。触发‘变化’； }; }; 汽车 自行车 川崎 铃木 迈凯轮 法拉利

---

我创建了一个隐藏禁用的OptGroup的方法：

$.initialize(".select2-results__option[role='group']", function(index, optionGroup)
    {
        let optGroupName = $(this).attr("aria-label");

        let select2ResultsId =$(this).closest("ul.select2-results__options").attr("id");

        if(select2ResultsId)
        {
            let ptrn = /^select2-([\w]+)-results/i;
            let res =ptrn.exec(select2ResultsId);

            if(res.length > 0)
            {
                let relSelect2Id = res[1];

                let relOptGroup= $("#" + relSelect2Id).find("optgroup[label='" +optGroupName +  "'][disabled]");

                if (relOptGroup.length)
                {
                    $(optionGroup).attr("disabled", "disabled");
                    $(optionGroup).attr("aria-disabled", "true");
                }
            }
        }
    });

Css:

$.initialize是jquery插件：

---

**select中的相关optgroup必须禁用属性**

这是可行的，但这没有什么问题。如果有人错误地选择了一个，那么它必须刷新浏览器。我需要类似于切换的东西。你的代码不工作，如果你运行代码段，你会发现它不工作。具体来说，什么东西不工作？我很确定我已经测试过了，但我可能遗漏了什么。运行上面的代码片段，从下拉列表中选择值，看看它是否有效？？

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