页面重新加载后如何在Jquery selectbox中保留选定的值？

Question

伙计们，我正在为我的组织制作月度报告，在此报告中，我们必须按月过滤数据。 因此，我有一个包含所有月份名称的下拉列表，该下拉列表用于通过向控制器提供月份编号来过滤数据。

除页面加载外，其他所有功能都工作正常，下拉列表刷新，并且所选值未突出显示。

这是我的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;}

如何在下拉菜单中保留选定的月份？ 我的意思是，例如，如果我选择“五月”然后过滤结果（重新加载页面），则下拉菜单中应突出显示“五月”月份。

顺便说一句，我在我的查询字符串（例如/ UserReport？month = 02）中得到了月份号（例如：02,03）。 我可以从查询字符串中获取值，然后将其与value属性匹配吗

元素并选择值何时匹配？

Answer 1

我认为有两种可能的解决方案。

1-在选择框/您的标记元素发生更改事件时，您可以触发javascript / jquery制作cookie并存储其值。 然后，当页面刷新时，使用cookie并获取选定的值。

要么

2-使用php /服务器端语言在使用ajax更改选择框时设置会话变量，并在页面加载时使用此会话变量获取所选值。