如何在页面重新加载后在Jquery选择框中保留所选值

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

本文关键字:选择 Jquery 保留 加载 新加载      更新时间:2023-09-26

伙计们,我正在为我的组织编写月度报告,在这份报告中,我们必须按月份过滤数据。所以我有一个下拉列表,里面有所有的月份名称,这个下拉列表用于通过向控制器提供月份编号来过滤数据。

除了页面加载、刷新下拉列表以及不突出显示所选值之外,所有操作都正常。

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

如何在下拉列表中保留所选月份?我的意思是,例如,如果我选择五月,然后过滤结果(页面被重新加载),那么"五月"这个月应该在下拉列表中突出显示。

顺便说一句,我在我的查询字符串中得到了月份号(例如:02,03)(比如这个/UserReport?month=02)。我可以从查询字符串中获取值,然后将其与

元素的value属性匹配,并选择值匹配的时间吗?

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

1-在select box/your标记元素的更改事件中,您可以向make a cookie激发javascript/jquery并存储其值。然后在页面刷新时使用cookie并获取选定的值。

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