How to refresh select2 dropdown?

Question

How to refresh select2 dropdown after refresh of page? For example, my dropdown has options:

option1 
option2
option3

When I open a page, default option is option1 . When I choose option2 and then refresh page, there is still option2 as selected, not option1 . How can I fix it? I noticed the problem only on Firefox, on Chrome it works fine.

My 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'
    });

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

Answer 1

try this. It will trigger 'change' event on document ready. plase it after you define you evet handlers.

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

You can use something like this:

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

where value is the value of option you want to set. hope this help: :)

Answer 3

I guess there is problem in cache memory of browser. Install Extension for clear cache data.
For example you can use this extension
Do refresh using this extension.