HTML年份月份选择框

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

1、创建HTML结构

我们需要创建一个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文件的底部,当我们更改年份选择框的值时,月份选择框中的选项将自动更新以反映所选年份的月份,同样,当我们更改月份选择框的值时,年份选择框中的选项将自动更新以反映所选月份的年份。

网页标题:HTML年份月份选择框
路径分享:http://www.shufengxianlan.com/qtweb/news2/380052.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联