核心概念：change事件

与按钮的click事件类似，HTML表单元素（如, , ) 都有各自的事件来响应用户的交互。对于<select>元素，当用户选择一个新选项，并且该选项与之前选择的选项不同时，会触发change事件。通过监听这个事件，我们可以在选项值发生变化时执行自定义逻辑。</select>

HTML结构准备

首先，我们需要一个基本的HTML 元素。为了美观和响应式设计，我们可以结合Bootstrap 5的样式类。

  
  
  
  
  


  

    
选择年份
    
      请选择年份
      2022
      2021
      2020
      2019
      2018
    
    
您选择的年份是: 
  

  
  

在上述HTML代码中，我们创建了一个ID为inputYear的元素，并应用了Bootstrap的form-select类。我们还添加了一个元素，用于显示用户选择的年份，方便验证功能。

JavaScript实现：事件监听与函数执行

接下来是JavaScript部分，我们将为inputYear元素添加一个change事件监听器。

立即学习“Java免费学习笔记（深入）”；

独响

一个轻笔记+角色扮演的app

下载

// 定义一个在选项变更时执行的函数
function onYearSelect(event) {
  // event.target 指向触发事件的DOM元素，即  元素
  // event.target.value 获取当前选中选项的值
  const selectedValue = event.target.value;
  console.log('您选择了年份: ' + selectedValue);

  // 可以在这里执行其他逻辑，例如更新页面内容
  const displayElement = document.getElementById('selectedYearDisplay');
  if (displayElement) {
    displayElement.textContent = selectedValue;
  }

  // 示例：如果选择了2022年，弹出一个提示
  if (selectedValue === '2022') {
    alert('您选择了当前年份！');
  }
}

// 获取  元素
const yearSelectElement = document.querySelector("#inputYear");

// 为  元素添加 'change' 事件监听器
// 当用户选择一个新选项时，onYearSelect 函数将被调用
if (yearSelectElement) {
  yearSelectElement.addEventListener("change", onYearSelect);
}
代码解析：


onYearSelect(event) 函数：这是当change事件触发时将被执行的函数。它接收一个event对象作为参数。

event.target.value：event.target指向触发事件的DOM元素，即我们的元素。通过.value属性，我们可以轻松获取当前选中选项的value属性值。


document.querySelector("#inputYear")：这是一个获取DOM元素的常用方法，通过元素的ID来精确选择目标元素。

yearSelectElement.addEventListener("change", onYearSelect)：这是核心部分。它将onYearSelect函数注册为inputYear元素的change事件的处理函数。每当用户选择一个新选项，并且选项值发生变化时，onYearSelect函数就会自动执行。

完整示例代码
为了方便测试，您可以将HTML和JavaScript代码整合到一个文件中：



  
  
  
  
  


  

    
选择年份
    
      请选择年份
      2022
      2021
      2020
      2019
      2018
    
    
您选择的年份是: 
  

  

注意事项


脚本位置：确保您的JavaScript代码在DOM元素（即元素）加载完成后执行。最常见的方法是将


初始值处理：如果元素有默认选中的选项，change事件不会在页面加载时自动触发。它只会在用户手动更改选项时触发。如果您需要在页面加载时基于默认值执行某些逻辑，您需要在JavaScript中手动调用一次onYearSelect函数，或者在DOMContentLoaded事件中获取初始值并处理。


错误处理：在实际应用中，您可能需要对event.target.value进行验证，以确保其符合预期，特别是当您的元素包含一个如“请选择”的空值选项时。


用户体验：如果onYearSelect函数执行的操作比较耗时，考虑给用户提供视觉反馈（例如加载指示器），以提升用户体验。

总结
通过使用JavaScript的change事件监听器，我们可以轻松实现当用户从HTML 元素中选择一个选项后，立即执行指定函数的功能。这种方法避免了传统表单提交或额外按钮的需要，使得用户界面更加动态和响应迅速。掌握这一技巧对于构建现代、交互性强的Web应用至关重要。