当前位置:首页 > Web开发 > 正文

JS年份下拉框

2024-03-31 Web开发

<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年,可以根据自己实际需求改变

效果图

谷歌不支持字体居中

技术图片

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/42585.html