How to retain the selected value in Jquery selectbox after page reload?

Question

Guys I am working on a monthly report for my organization and in this report, we have to filter the data by a month. So I have a drop down list which has all the month names and this drop down list is used to filter data by providing month number to the controller.

All is working fine except on the page load, the drop down list gets refreshed and the selected value is not highlighted.

This is my html :

<div class="selectBox">
<span id="spanMonth"></span>
<aside>
    <p value="01">January</p>
    <p value="02">February</p>
    <p value="03">March</p>
    <p value="04">April</p>
    <p value="05">May</p>
    <p value="06">June</p>
    <p value="07">July</p>
    <p value="08">August</p>
    <p value="09">September</p>
    <p value="10">October</p>
    <p value="11">November</p>
    <p value="12">December</p>
</aside>

Jquery :

// Custom Select Box Jquery
$(".selectBox > span").each(function () {
    if ($(this).text() == "") {
        var defaultValue = $(this).parent().find('aside p').first().text();
        $(this).text(defaultValue);
    }
});

$("body").delegate('.selectBox', 'click', function (e) {
    $(".selectBox aside").slideUp();
    $(this).children("aside").stop().slideToggle(300);


    $(this).find('p').on('click', function () {
        var tgt = $(this);
        $(".selectBox p").removeClass('slctd');
        tgt.addClass('slctd');
        tgt.parents('.selectBox').find('span').html(tgt.text());
    });
    e.stopPropagation();
});

$('.filter-drop').on('click', function () {
    var $this = $(this);
    $this.toggleClass('active');
    $this.parents('.filterbox').find('.filterDv').slideToggle();
    $this.parent().outside('click', function () {
        if ($this.hasClass('active')) {
            $this.removeClass('active');
            $this.parents('.filterbox').find('.filterDv').slideUp();
        }
    });
});

CSS :

.filterDv .selectBox{ margin-bottom:20px; background: #f8f8f8;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f8f8f8 0%, #efefef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#efefef));
background: -webkit-linear-gradient(top, #f8f8f8 0%,#efefef 100%);
background: -o-linear-gradient(top, #f8f8f8 0%,#efefef 100%);
background: -ms-linear-gradient(top, #f8f8f8 0%,#efefef 100%);
background: linear-gradient(to bottom, #f8f8f8 0%,#efefef 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#efefef',GradientType=0 );}
.filterDv .selectBox span { padding: 6px 8px; color:#777777; }  
.filterDv .selectBox:after{ top:7px;}
.filterDv .selectBox aside{ top:28px;}

/*Custom Select Box */
.filterDv .selectBox{position: relative;min-width: 140px;color: #92a0a8;border: 1px solid #dee0e4;font-size: 11px;border-radius: 2px;}
.filterDv .selectBox span {cursor:pointer; padding:6px 8px;display:block;}
.filterDv .selectBox:after{cursor:pointer;content: '\25BC';position: absolute;right: 8px;top: 4px;color: #bec1ca;font-size: 9px;}
.filterDv .selectBox aside {display:none;margin-bottom: 0;position: absolute;z-index: 11;left: 0;right: 0;top: 23px;border: 1px solid #dee0e4;border-radius: 2px;}
.filterDv .selectBox p {cursor: pointer;position: relative;background: #fff;padding: 0 8px;margin: 0;line-height: 26px;}
.filterDv .selectBox p:hover{background:#f2f2f2;}
.filterDv .selectBox p.first{color:#667b87;border-bottom:1px solid #ececec;}

How can I retain the selected month in the drop down ? What I mean is for example if I select May and then filter the results (page get reloaded), then the month "May" should be highlighted in the drop down.

BTW, I am getting the month number (eg : 02,03) in my query string (like this /UserReport?month=02). Can I get the value from the query string and then match it with value attribute of

elements and select when the value matches ?

Answer 1

I think there are two possible solutions for you.

1- On change event of select box/your tag element you can fire a javascript/jquery to a make a cookie and store its value. Then when page refresh make use of cookie and get value selected.

or

2- use php/server side language to set a session variable on change of select box using ajax and when page loads use this session variable to get value selected.