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年,可以根据自己实际需求改变
效果图
谷歌不支持字体居中
![](https://img2018.cnblogs.com/i-beta/1704645/201911/1704645-20191127112705556-802989973.png)