说明：抽离代码，仅供参考！
<style>
.span_y {
width: 24px;
height: 20px;
position: absolute;
margin-left: 13.8%;
}
.span_m {
width: 24px;
height: 20px;
position: absolute;
margin-left: 20%;
}
#year_select {
float: left;
width: 4%;
margin-top: 0.4%;
height: 20px;
margin-left: 15.6%;
position: absolute;
border-radius: 1.6%;
border: 1px solid #AAAAAA;
}
#year_value {
top: -38%;
width: 100%;
font-size: 12px;
position: relative;
margin-left: -16%;
}
.year_ul{
width: 4%;
display: none;
border-top: 0;
list-style: none;
position: absolute;
margin-top: 1.72%;
margin-left: 15.6%;
border: 1px solid #7B9DD4;
}
.month_ul{
width: 2.8%;
display: none;
border-top: 0;
list-style: none;
position: absolute;
margin-top: -0.46%;
margin-left: 21.82%;
border: 1px solid #7B9DD4;
}
.year_ul li>a{
color: #000;
height: 18px;
display: block;
padding: 2px 5px;
line-height: 20px;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
}
.month_ul li>a{
color: #000;
height: 18px;
display: block;
padding: 2px 5px;
line-height: 20px;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
}
.year_ul li {
background-color: white;
}
.month_ul li {
background-color: white;
}
.year_ul li>a:hover{
border: 1px solid #83B7D3;
border-radius: 3px;
background-color: #1E90FF;
color: #fff;
}
.month_ul li>a:hover{
border: 1px solid #83B7D3;
border-radius: 3px;
background-color: #1E90FF;
color: #fff;
}
/**
* select!
*/
#month_select {
float: left;
width: 2.8%;
margin-top: 0.4%;
height: 20px;
margin-left: 21.8%;
position: absolute;
border-radius: 1.6%;
border: 1px solid #AAAAAA;
}
#month_value {
top: -38%;
width: 100%;
font-size: 12px;
margin-left: -22%;
position: relative;
}
.month_icon {
top:46%;
right:6%;
width: inherit;
margin-top: -2%;
position: absolute;
border-width: 4.2px;
border-style: solid;
border-color: #02a2ff transparent transparent transparent;
}
.year_icon {
position: absolute;
top:46%;
right:6%;
margin-top: -2%;
border-width: 4.2px;
border-style: solid;
border-color: #02a2ff transparent transparent transparent;
}
.vip_tit p {
float: left;
}
.button {
width: 2%;
float: left;
margin-top: 0.4%;
position: absolute;
margin-left: 4.32%;
}
</style>
var ndate = new Date();
var year = ndate.getFullYear(); // 年。
var month = ndate.getMonth() + 1; // 月。
var new_year = year;
var last_year = year - 1 ;
var last_l_year = year - 2 ;
$(".year_ul").append("<li><a href='#' data-Yid='"+new_year+"'>"+new_year+"年</a></li>");//为Select追加一个Option(下拉项)
$(".year_ul").append("<li><a href='#' data-Yid='"+last_year+"'>"+last_year+"年</a></li>");//为Select追加一个Option(下拉项)
$(".year_ul").append("<li><a href='#' data-Yid='"+last_l_year+"'>"+last_l_year+"年</a></li>");//为Select追加一个Option(下拉项)
var y = '${pd.YEAR}';
var m = '${pd.MONTH}';
var result = '${result}';
// action!
$("#year_value").html(new_year+"年");
$("#month_value").html(month+"月");
if(y == ""){
$("#year_value").html(new_year+'月');
}else{
$("#year_value").html(y+'月');
}
if(m == ""){
$("#month_value").html(month+'月');
}else{
$("#month_value").html(m+'月');
}
$(function(){
$("#year_select").hover(function(){
$("#year_select").removeClass("border");
$("#year_select").css("border","1px solid #707070");
},function(){
$("#year_select").removeClass("border");
$("#year_select").css("border","1px solid #AAAAAA");
});
$("#month_select").hover(function(){
$("#month_select").removeClass("border");
$("#month_select").css("border","1px solid #707070");
},function(){
$("#month_select").removeClass("border");
$("#month_select").css("border","1px solid #AAAAAA");
});
$(".year_ul li>a").click(function () {
$(".year_ul").css("display","none");
$("#year_value").html($(this).html()).attr("data-Yid",$(this).attr("data-Yid"));
$("#year_value").html($(this).attr("data-Yid")+"月");
});
$(".month_ul li>a").click(function () {
$(".month_ul").css("display","none");
$("#month_value").html($(this).html()).attr("data-Mid",$(this).attr("data-Mid"));
$("#month_value").html($(this).attr("data-Mid")+"月");
});
$("#year_select").click(function(){
displayNowY = true;
$(".year_ul").toggle();
});
$("#month_select").click(function(){
displayNowM = true;
$(".month_ul").toggle();
});
$("#year_select").mouseleave(function(){
displayNowY = false;
});
$("#month_select").mouseleave(function(){
displayNowM = false;
});
$("html").click(function(){
if(displayNowY == false){
$(".year_ul").css("display","none");
}
if(displayNowM == false){
$(".month_ul").css("display","none");
}
});
});
function getYV(){
return $("#year_value").html().slice(0,4);
}
function getMV(){
let num = $("#month_value").html().slice(0,2);
if(!isNaN(num)){
return num;
}else{
return num.slice(0,1);
}
}
<div class="span_y">年度</div>
<div id="year_select">
<span id="year_value">-请选择-</span><b class="year_icon"></b>
</div>
<ul class="year_ul" style="display:none;"></ul>
<div class="span_m">月度</div>
<div id="month_select">
<span id="month_value">-请选择-</span><b class="month_icon"></b>
</div>
<input class="button" type="button" name="button" value="查询" onclick="search()" />
<ul class="month_ul">
<li><a href="#" data-Mid="1">1月</a></li>
<li><a href="#" data-Mid="2">2月</a></li>
<li><a href="#" data-Mid="3">3月</a></li>
<li><a href="#" data-Mid="4">4月</a></li>
<li><a href="#" data-Mid="5">5月</a></li>
<li><a href="#" data-Mid="6">6月</a></li>
<li><a href="#" data-Mid="7">7月</a></li>
<li><a href="#" data-Mid="8">8月</a></li>
<li><a href="#" data-Mid="9">9月</a></li>
<li><a href="#" data-Mid="10">10月</a></li>
<li><a href="#" data-Mid="11">11月</a></li>
<li><a href="#" data-Mid="12">12月</a></li>
</ul>
</div>
$(function(){
// 参数赋值！
$(".ul li>a").click(function () {
$(".ul").css("display","none");
$("#content").html($(this).html()).attr("data-id",$(this).attr("data-id"));
$("#content_val").val($(this).attr("data-id"));
});
// 进入！
$("#selected").mouseenter(function(){
$("#selected").css("border","1px solid #707070");
});
// 移出！
$("#selected").mouseleave(function(){
$("#selected").removeClass("border");
$("#selected").css("border","1px solid #AAAAAA");
});
// 下拉框触发！
$("#selected").click(function(){
displayNow = true;
$(".ul").toggle();
});
// 下拉框离开！
$("#selected").mouseleave(function(){
displayNow = false;
});
// 公共事件
$("body").click(function(){
if(displayNow == false){
$(".ul").css("display","none");
}
});
});
