如何刷新 select2 下拉列表？

Question

页面刷新后如何刷新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));

Answer 1

试试这个！它将在文档准备就绪时触发 'change' 事件。请在定义事件处理程序后使用它。

    $(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));

Answer 2

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

Answer 3

你可以这样使用：

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

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

如何刷新 select2 下拉列表？

How to refresh select2 dropdown?

javascript

firefox

jquery

jquery-select2