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。内容未经允许不得转载,或转载时需注明来源: 创新互联