javascript - How to refresh select2 dropdown? - Stack Overflow

admin管理员组

文章数量:1415120

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

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

• javascript
• jquery
• firefox
• jquery-select2

Share Improve this question Follow edited Nov 22, 2019 at 10:32 sailormoon asked Nov 22, 2019 at 8:55 sailormoonsailormoon 33555 silver badges2020 bronze badges 2

• 1 I'm not sure Select2 should remember the settings but please post your code, without it we can't tell if you have an error in your code. – Carsten Løvbo Andersen Commented Nov 22, 2019 at 8:56
• @CarstenLøvboAndersen I posted my code. – sailormoon Commented Nov 22, 2019 at 8:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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! :)

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

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.

本文标签： javascriptHow to refresh select2 dropdownStack Overflow