JS年份下拉框

Posted 2020-11-22 双木之下藏倒影

html

<select name="" id="year">

           <option value="" selected style="display: none">----请选择年份----</option>

</select>

下拉框中隐藏了第一个option并且默认选中

CSS

#year{

  position: absolute;

    top: 10px;

    left: 465px;

    width: 180px;

    height: 32px;

    line-height:32px;

    cursor: pointer;

    border: 1px solid #E2E3E8;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

    appearance:none;  //消除默认箭头

    -webkit-appearance: none;

    -moz-appearance: none;

    background: url("../image/iconSelect.png") no-repeat right;//使用自己定义的箭头

}

JS

var now = new Date();

  var nowYear = now.getFullYear();

  for (var i = nowYear;i >= 2000; i--) {

      var option = $("<option/>").val(i).text(i);

      $(\'#year\').append(option);

  }

这里的话是最新到2000年，可以根据自己实际需求改变

效果图

谷歌不支持字体居中