要实现在网页中动态向 `div` 容器内添加一个包含**
当前年份**和**下一
年年份**选项的 `<
select>` 元素，可以通过 JavaScript 动态创建元素并插入到指定的 `div` 中。以下是完整的实现方式：
### 创建 HTML 结构
首先，在 HTML 页面中定义一个 `div` 容器，用于承载动态生成的下
拉框。
```html
<div id="year
SelectContainer"></div>
```
### 使用 JavaScript 动态生成下
拉框
接下来使用 JavaScript
获取当前年份，并构建包含
当前年份和下一
年年份的 `<
select>` 元素。
```javascript
//
获取当前年份
const currentYear = new Date().getFullYear();
// 下一
年年份
const nextYear = currentYear + 1;
// 创建
select 元素
const
selectElement = document.create
Element("
select");
selectElement.id = "year
Selector";
// 创建 option 元素并添加到
select 中
const currentYearOption = document.create
Element("option");
currentYearOption.value = currentYear;
currentYearOption.textContent = currentYear;
selectElement.appendChild(currentYearOption);
const nextYearOption = document.create
Element("option");
nextYearOption.value = nextYear;
nextYearOption.textContent = nextYear;
selectElement.appendChild(nextYearOption);
// 将
select 元素插入到 div 容器中
document.get
ElementById("year
SelectContainer").appendChild(
selectElement);
```
### 样式优化（可选）
为了增强用户体验，可以为下
拉框添加一些基础样式。
```css
#year
SelectContainer
select {
padding: 8px;
font
-size: 16px;
border
-radius: 4px;
border: 1px solid #ccc;
}
```
### 扩展功能：监听选择变化事件
如果需要在用户选择
年份后执行某些操作，例如更新页面内容或发送请求，可以添加事件监听器。
```javascript
selectElement.addEventListener("change", function () {
const
selectedYear = this.value;
alert(`您选择了
年份：${
selectedYear}`);
});
```
### 示例完整代码
以下是一个完整的 HTML 示例，整合了上述所有部分：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8" />
<meta name="viewport" content="width=device
-width, initial
-scale=1.0"/>
<title>动态
年份下
拉框</title>
<style>
#year
SelectContainer
select {
padding: 8px;
font
-size: 16px;
border
-radius: 4px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="year
SelectContainer"></div>
<script>
//
获取当前年份
const currentYear = new Date().getFullYear();
const nextYear = currentYear + 1;
// 创建
select 元素
const
selectElement = document.create
Element("
select");
selectElement.id = "year
Selector";
// 添加
当前年份选项
const currentYearOption = document.create
Element("option");
currentYearOption.value = currentYear;
currentYearOption.textContent = currentYear;
selectElement.appendChild(currentYearOption);
// 添加下一
年年份选项
const nextYearOption = document.create
Element("option");
nextYearOption.value = nextYear;
nextYearOption.textContent = nextYear;
selectElement.appendChild(nextYearOption);
// 插入到容器中
document.get
ElementById("year
SelectContainer").appendChild(
selectElement);
// 监听 change 事件
selectElement.addEventListener("change", function () {
const
selectedYear = this.value;
alert(`您选择了
年份：${
selectedYear}`);
});
</script>
</body>
</html>
```
博客给出了一段代码 RANGE(MID(FORMAT(TODAY(),“yyyy-MM-dd”),1,4),MID(FORMAT(TODAY(),“yyyy-MM-dd”),1,4)+5) ，推测是用于获取当前日期年份及往后 5 年的年份范围，属于信息技术领域的函数应用内容。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
