兼容IE下拉框

 

说明：抽离代码，仅供参考！
    <style>
       
       .span_y {
               24px;
                  height: 20px;
                  position: absolute;
              margin-left: 13.8%;
       }
       
       .span_m {
               24px;
                  height: 20px;
                  position: absolute;
              margin-left: 20%;
       }
       
        #year_select {
            float: left;
                   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%;
                   100%;
                  font-size: 12px;
                  position: relative;
                  margin-left: -16%;
        }
        
        .year_ul{
               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{
               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;
                   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%;
                   100%;
              font-size: 12px;
                  margin-left: -22%;
                  position: relative;
        }
        .month_icon {
            top:46%;
            right:6%;
             inherit;
            margin-top: -2%;
            position: absolute;
            border- 4.2px;
            border-style: solid;
            border-color: #02a2ff transparent transparent transparent;
        }
        .year_icon {
            position: absolute;
            top:46%;
            right:6%;
            margin-top: -2%;
            border- 4.2px;
            border-style: solid;
            border-color: #02a2ff transparent transparent transparent;
        }

              .vip_tit p {
                     float: left;
              }
              
              .button {
                   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>
              &nbsp;<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");
            }
        });
        
    });