当前位置：首页 > 行业动态 > 正文

HTML年份月份选择框

admin
行业动态
2024-04-14
1

HTML年份月份选择框是一种常见的网页元素，用于让用户在网页上选择特定的年份和月份，这种选择框通常用于日期选择器、时间选择器等场景，在本教程中，我们将学习如何使用HTML和JavaScript创建一个年份月份选择框。

1、创建HTML结构

我们需要创建一个HTML文件，并在其中添加一个表单元素，用于包含年份和月份选择框，接下来，我们需要添加两个<select>元素，分别用于显示年份和月份，我们需要为这两个<select>元素添加<option>元素，以便用户可以从中选择年份和月份。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>年份月份选择框</title>
</head>
<body>
    <form>
        <label for="year">年份：</label>
        <select id="year"></select>
        <br>
        <label for="month">月份：</label>
        <select id="month"></select>
    </form>
    <script src="main.js"></script>
</body>
</html>

2、编写JavaScript代码

接下来，我们需要编写JavaScript代码来填充年份和月份选择框，我们需要获取当前年份和月份，并将其作为默认选项添加到选择框中，我们需要遍历所有年份和月份，并将它们添加到相应的选择框中，我们需要为每个选择框添加事件监听器，以便在用户更改选择时更新其他选择框的值。

// 获取当前年份和月份
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
// 获取年份和月份选择框元素
const yearSelect = document.getElementById('year');
const monthSelect = document.getElementById('month');
// 填充年份选择框
for (let i = currentYear 50; i <= currentYear + 50; i++) {
    const option = document.createElement('option');
    option.value = i;
    option.text = i;
    yearSelect.add(option);
}
// 填充月份选择框
for (let i = 1; i <= 12; i++) {
    const option = document.createElement('option');
    option.value = i;
    option.text = i;
    monthSelect.add(option);
}
// 设置默认选项值
yearSelect.value = currentYear;
monthSelect.value = currentMonth;
// 为年份选择框添加事件监听器，以便在用户更改选择时更新月份选择框的值
yearSelect.addEventListener('change', () => {
    const selectedYear = parseInt(yearSelect.value);
    monthSelect.innerHTML = ''; // 清空月份选择框的选项
    for (let i = 1; i <= 12; i++) {
        const option = document.createElement('option');
        option.value = i;
        option.text = i;
        if (i === selectedYear) { // 如果当前年份是选中的年份，则将当前月份设置为选中的月份
            option.selected = true;
        } else if (i === currentMonth && selectedYear !== currentYear) { // 如果当前月份不是选中的月份，但当前年份与选中的年份不同，则将当前月份设置为选中的月份（当用户从下拉列表中选择一个不同的年份时）
            option.selected = true;
        } else { // 否则，将当前月份设置为默认选项值（即1）
            option.selected = false;
        }
        monthSelect.add(option);
    }
});

3、测试页面

现在，我们可以在浏览器中打开HTML文件，查看年份和月份选择框的效果，请注意，由于我们使用了JavaScript代码来填充选择框，因此需要确保在HTML文件中正确引用了JavaScript文件，在本例中，我们将JavaScript代码放在了一个名为main.js的文件中，并将其链接到了HTML文件的底部，当我们更改年份选择框的值时，月份选择框中的选项将自动更新以反映所选年份的月份，同样，当我们更改月份选择框的值时，年份选择框中的选项将自动更新以反映所选月份的年份。