<think>我们参考用户的问题：用户想查找
使用Layui实现年份
下拉框的示例代码。
根据引用内容，我们知道
Layui是一个模块化的前端框架，其中包含了很多组件，但引用中并没有直接提到
下拉框（特别是年份选择）的示例。
但是，我们可以根据
Layui的一般用法来构建一个年份
下拉框。
在
Layui中，
下拉框通常
使用`form`模块和`
select`元素来创建。我们可以
动态生成一个包含年份的`
select`元素，然后
使用`form.render
()`来
渲染。
步骤：
1. 在HTML中创建一个`
select`元素，并设置好id和lay-filter（用于事件监听）。
2.
使用JavaScript
动态生成年份选项，并添加到`
select`中。
3.
使用`
layui.use`加载`form`模块，并在回调函数中
渲染表单（包括这个
下拉框）。
考虑到用户可能需要一个年份范围，我们可以设置一个起始年份和结束年份（比如从1900年到当前年份）。
示例代码：
HTML部分：
```html
<
select id="year
Select" lay-filter="year
Select">
<option value="">请选择年份</option>
</
select>
```
JavaScript部分：
```javascript
layui.use
('form', function
(){
var form =
layui.form;
var $ =
layui.$;
// 获取当前年份
var currentYear = new Date
().getFullYear
();
// 设置起始年份（这里假设从1900年开始）
var startYear = 1900;
// 生成年份选项
for
(var year = startYear; year <= currentYear; year++
) {
$
('#year
Select'
).append
('<option value="' + year + '">' + year + '年</option>'
);
}
// 重新
渲染表单，这样新添加的选项才会显示出来
form.render
('
select'
);
}
);
```
注意：由于
Layui的
select是
动态渲染的，所以当我们通过JS
动态添加option后，必须调用`form.render
('
select'
);`来重新
渲染。
另外，如果需要监听
下拉框的选择事件，可以在`form.on
('
select(year
Select)', function
(data
){ ... }
);`中处理。
例如：
```javascript
form.on
('
select(year
Select)', function
(data
){
console.log
(data.value
); // 得到
选中的
值
}
);
```
这样，一个简单的年份
下拉框就实现了。
但是，用户可能还需要一个更简便的方法，比如
使用Layui的日期组件（但日期组件通常是选择年月日的，单独选择年份的组件
Layui并没有直接提供）。因此，上述方法是最常用的。
另外，引用[1]中提到，
Layui可以独立
使用，也可以模块化
使用。上面的代码是模块化
使用的例子。如果独立
使用，需要先引入
layui.js，然后同样按照这个结构编写代码。
因此，我们给出完整的示例代码（包含在HTML页面中）：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>年份选择
下拉框示例</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
layui@2.6.8/dist/css/
layui.css">
</head>
<body>
<
select id="year
Select" lay-filter="year
Select">
<option value="">请选择年份</option>
</
select>
<script src="https://cdn.jsdelivr.net/npm/
layui@2.6.8/dist/
layui.js"></script>
<script>
layui.use
('form', function
(){
var form =
layui.form;
var $ =
layui.$;
// 获取当前年份
var currentYear = new Date
().getFullYear
();
// 设置起始年份（这里假设从1900年开始）
var startYear = 1900;
// 生成年份选项
for
(var year = currentYear; year >= startYear; year--
) {
// 这里我们倒序排列，从当前年份往前，这样最近年份在前面
$
('#year
Select'
).append
('<option value="' + year + '">' + year + '年</option>'
);
}
// 重新
渲染表单
form.render
('
select'
);
// 监听
下拉框选择
form.on
('
select(year
Select)', function
(data
){
console.log
(data.value
); // 得到
选中的
值
// 在这里可以处理
选中的年份
}
);
}
);
</script>
</body>
</html>
```
注意：这里我们
使用了CDN引入
Layui，在实际项目中可以根据需要调整路径。另外，我们让年份从当前年份倒序排列（从大到小），这样用户通常选择最近的年份比较方便。
如果用户需要正序排列，只需将循环改为：`for
(var year = startYear; year <= currentYear; year++
)`。
另外，如果用户需要设置默认
选中的年份（比如当前年份），可以在添加选项时判断并设置
selected属性。
例如，在循环中添加：
```javascript
for
(var year = currentYear; year >= startYear; year--
) {
var option = $
('<option>', {
value: year,
text: year + '年'
}
);
if
(year === currentYear
) {
option.attr
('
selected', '
selected'
);
}
$
('#year
Select'
).append
(option
);
}
```
但是注意，因为我们在循环之前已经有一个“请选择年份”的选项，所以默认
选中当前年份会覆盖这个选项。因此，我们可以在生成选项后，再通过JS设置默认
选中的
值。
另一种方法：在生成选项后，设置value为当前年份的选项为
选中，然后重新
渲染。
示例：
```javascript
// ... 生成选项后 ...
$
('#year
Select'
).val
(currentYear
); // 设置当前年份为
选中
form.render
('
select'
); // 重新
渲染，使
选中生效
```
但是注意，这样设置后，初始显示的就是当前年份，而不再是“请选择年份”。如果用户希望默认是请选择，就不要设置默认
选中。
因此，根据用户需求选择是否默认
选中。
最后，我们根据用户要求生成相关问题：</think>以下是
使用 Layui 实现年份选择
下拉框的完整示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Layui 年份选择器示例</title>
<!-- 引入
Layui 样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
layui@2.6.8/dist/css/
layui.css">
</head>
<body>
<div class="
layui-form" style="padding: 20px;">
<!-- 年份
下拉框 -->
<div class="
layui-form-item">
<label class="
layui-form-label">选择年份</label>
<div class="
layui-input-inline">
<
select name="year" id="year
Select" lay-filter="year
Select">
<option value="">请选择年份</option>
<!-- 年份选项将通过JS
动态生成 -->
</
select>
</div>
</div>
<!-- 显示
选中结果 -->
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" id="showValue">显示
选中值</button>
<div id="result" class="
layui-bg-gray" style="padding:10px;margin-top:10px;display:none;">
当前
选中年份：<span id="yearValue"></span>
</div>
</div>
</div>
</div>
<!-- 引入
Layui 和 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
layui@2.6.8/dist/
layui.js"></script>
<script>
layui.use
(['form'], function
(){
var form =
layui.form;
var $ =
layui.$;
//
动态生成年份选项（最近20年）
var currentYear = new Date
().getFullYear
();
var yearHtml = '';
for
(var year = currentYear; year >= currentYear - 20; year--
) {
yearHtml += '<option value="' + year + '">' + year + '年</option>';
}
$
('#year
Select'
).append
(yearHtml
);
form.render
('
select'
); // 刷新
下拉框渲染
// 监听
下拉框选择事件
form.on
('
select(year
Select)', function
(data
){
$
('#result'
).show
();
$
('#yearValue'
).text
(data.value
);
}
);
// 按钮点击事件
$
('#showValue'
).click
(function
(){
var
selectedYear = $
('#year
Select'
).val
();
if
(selectedYear
) {
layer.msg
('当前
选中年份: ' +
selectedYear
);
} else {
layer.msg
('请先选择年份'
);
}
}
);
}
);
</script>
</body>
</html>
```
### 核心实现说明：
1. **
动态生成年份**：
```javascript
for
(var year = currentYear; year >= currentYear - 20; year--
) {
yearHtml += '<option value="' + year + '">' + year + '年</option>';
}
```
生成最近21年（当前年 + 前20年）的选项，按倒序排列
2. **刷新
下拉框渲染**：
```javascript
form.render
('
select'
); //
动态添加选项后必须重新
渲染
```
3. **选择事件监听**：
```javascript
form.on
('
select(year
Select)', function
(data
){
// data.value 获取
选中值
}
);
```
4. **获取
选中值**：
```javascript
var
selectedYear = $
('#year
Select'
).val
();
```
### 功能特点：
- 自动生成最近21年的年份选项
- 实时显示
选中结果
- 支持点击按钮显示
选中值
- 响应式布局适配移动端
- 符合
Layui 表单规范
###
使用说明：
1. 直接复制代码保存为 HTML 文件
2. 浏览器打开即可
使用
3. 可通过修改循环参数调整年份范围：
```javascript
// 示例：生成1950-当前年份
for
(var year = currentYear; year >= 1950; year--
) {
// ...
}
```
[^1]:
Layui 官方文档中关于表单和下拉选择器的
使用说明
[^2]:
Layui 表单元素文档中关于
select 组件的
使用示例
最低0.47元/天 解锁文章
扫一扫
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
