伙计们我正在为我的组织制作月度报告,在本报告中,我们必须按月过滤数据。所以我有一个下拉列表,其中包含所有月份名称,此下拉列表用于通过向控制器提供月份数来过滤数据。
除页面加载外,所有工作正常,下拉列表会刷新,并且不会突出显示所选值。
这是我的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;}
如何在下拉菜单中保留所选月份?我的意思是,例如,如果我选择May然后过滤结果(页面重新加载),然后是月份&#34; May&#34;应该在下拉列表中突出显示。
顺便说一句,我在查询字符串中得到了月号(例如:02,03)(像这样/ UserReport?month = 02)。我可以从查询字符串中获取值,然后将其与
元素的value属性匹配,并在值匹配时选择吗?
答案 0 :(得分:0)
我认为有两种可能的解决方案。
1-在选择框/您的标记元素的更改事件中,您可以触发javascript / jquery以创建cookie并存储其值。然后当页面刷新使用cookie并选择值时。
或
2-使用php /服务器端语言在使用ajax更改选择框时设置会话变量,并在页面加载时使用此会话变量来获取值。