HTML年份月份选择框|极客教程

HTML年份月份选择框

在Web开发中，经常会遇到需要选择年份和月份的情况，例如日历应用、日期筛选等。为了方便用户选择日期，我们可以使用HTML提供的年份月份选择框来实现，

HTML年份选择框

HTML中可以使用<input>标签的type="month"来创建一个年份选择框。当用户点击输入框时，会弹出一个日期选择器，用户可以选择年份和月份。

<input type="month">

运行以上代码，会生成一个年份选择框，用户可以点击输入框选择年份和月份。

HTML年份月份选择框

而有时候，我们需要同时选择年份和月份，HTML并没有提供直接的年份月份选择框。但可以通过结合两个单独的选择框来实现年份月份选择。

年份选择框

<select id="year">
  <option value="2021">2021</option>
  <option value="2022">2022</option>
  <option value="2023">2023</option>
  <!-- 更多年份选项 -->
</select>

月份选择框

<select id="month">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <!-- 更多月份选项 -->
</select>

JavaScript获取选中的年份和月份

如果需要获取用户选择的年份和月份，可以通过JavaScript来实现。首先，给年份和月份选择框加上一个事件监听器，在选择框的值发生变化时触发相应的函数。

HTML

<select id="year" onchange="updateResult()">
  <option value="2021">2021</option>
  <option value="2022">2022</option>
  <option value="2023">2023</option>
  <!-- 更多年份选项 -->
</select>

<select id="month" onchange="updateResult()">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <!-- 更多月份选项 -->
</select>

<div id="result"></div>

JavaScript

function updateResult() {
  var year = document.getElementById("year").value;
  var month = document.getElementById("month").value;
  var result = "Selected Year: " + year + ", Selected Month: " + month;
  document.getElementById("result").innerHTML = result;
}

在以上代码中，updateResult()函数会在年份或月份选择框的值发生变化时被调用，然后获取选中的年份和月份值，并将结果显示在页面上。