如何刷新select2下拉菜单？答案

【问题标题】：How to refresh select2 dropdown?如何刷新select2下拉菜单？
【发布时间】：2019-11-22 08:55:11
【问题描述】：

如何在刷新页面后刷新 select2 下拉菜单？例如，我的下拉菜单有选项：

option1 
option2
option3

当我打开一个页面时，默认选项是option1。当我选择option2然后刷新页面时，仍然选择option2，而不是option1。我该如何解决？我注意到这个问题只在 Firefox 上，在 Chrome 上运行正常。

我的代码：

(function ($) {
    var phone_category = document.querySelector("#block-phonesandhours-block > div.phonelist > select");
    var phone_items = document.querySelectorAll("#block-phonesandhours-block > div.phonelist > .items > div");

    $(phone_category).on("change", function (e) {
        e.preventDefault();
        var selection = $(this).val();
        selection = selection.replace(/\s+/g, '-');

        $(phone_items).each(function(){
            if($(this).attr('class') == selection) {
                $(this).css("display","block");
            } else {
                $(this).css("display","none");
            }
        });
    });

    var hour_category = document.querySelector("#block-phonesandhours-block > div.hourlist > select");
    var hour_items = document.querySelectorAll("#block-phonesandhours-block > div.hourlist > .items > div");

    $(hour_category).on("change", function (e) {
        e.preventDefault();
        var selection = $(this).val();
        selection = selection.replace(/\s+/g, '-');

        $(hour_items).each(function(){
            if($(this).attr('class') == selection) {
                $(this).css("display","block");
            } else {
                $(this).css("display","none");
            }
        });
    });


    $(hour_category).select2({
        containerCssClass: "wrap",
        minimumResultsForSearch: -1,
        dropdownPosition: 'below'
    });

    $(phone_category).select2({
        containerCssClass: "wrap",
        minimumResultsForSearch: -1,
        dropdownPosition: 'below'
    });
}(jQuery));

【问题讨论】：

我不确定 Select2 是否应该记住这些设置，但请发布您的代码，没有它我们无法判断您的代码是否有错误。
@CarstenLøvboAndersen 我发布了我的代码。

标签： javascript jquery firefox jquery-select2

【解决方案1】：

你可以这样使用：

$(phone_category).val(value);
$(phone_category).trigger('change');

其中value 是您要设置的选项的值。希望这有帮助！ :)

【讨论】：

【解决方案2】：

试试这个！它将在文档准备好时触发“更改”事件。在定义事件处理程序后将其放置。

    $(SELECTOR).trigger('change');


this code!

    (function ($) {
    var phone_category = document.querySelector("#block-phonesandhours-block > div.phonelist > select");
    var phone_items = document.querySelectorAll("#block-phonesandhours-block > div.phonelist > .items > div");

    $(phone_category).on("change", function (e) {
        e.preventDefault();
        var selection = $(this).val();
        selection = selection.replace(/\s+/g, '-');

        $(phone_items).each(function(){
            if($(this).attr('class') == selection) {
                $(this).css("display","block");
            } else {
                $(this).css("display","none");
            }
        });
    });

    var hour_category = document.querySelector("#block-phonesandhours-block > div.hourlist > select");
    var hour_items = document.querySelectorAll("#block-phonesandhours-block > div.hourlist > .items > div");

    $(hour_category).on("change", function (e) {
        e.preventDefault();
        var selection = $(this).val();
        selection = selection.replace(/\s+/g, '-');

        $(hour_items).each(function(){
            if($(this).attr('class') == selection) {
                $(this).css("display","block");
            } else {
                $(this).css("display","none");
            }
        });
    });


    $(hour_category).select2({
        containerCssClass: "wrap",
        minimumResultsForSearch: -1,
        dropdownPosition: 'below'
    }).trigger('change');

    $(phone_category).select2({
        containerCssClass: "wrap",
        minimumResultsForSearch: -1,
        dropdownPosition: 'below'
    }).trigger('change');
}(jQuery));

【讨论】：

不幸的是它没有帮助:(

【解决方案3】：

我猜浏览器的缓存内存有问题。安装扩展以清除缓存数据。
例如，您可以使用 this 扩展名
使用此扩展程序进行刷新。

【讨论】：