选择 onchange 获取值 jquery - Javascript

在 Web 开发中，我们常常需要用户在页面上做出选择并取得所选项的值。这一过程通常通过下拉菜单实现，而 onchange 事件则是实现这一功能的最佳选择之一。本文将介绍如何在 jQuery 和 JavaScript 中使用 onchange 事件获取下拉菜单所选值。

在 jQuery 中使用 onchange

在 jQuery 中，我们可以通过为下拉菜单添加 onchange 事件来获取所选的值。下面是一个示例：

<select id="mySelect">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

<script>
$('#mySelect').on('change', function() {
  var selectedValue = $(this).val();
  alert(selectedValue);
});
</script>

在上面的示例中，我们为 id 为 mySelect 的下拉菜单添加了 onchange 事件监听器。当用户选择了某个选项后，事件处理函数将通过 $(this).val() 获取所选值，并通过 alert 函数将其弹出。通过这种方式，我们可以很方便地获取下拉菜单的所选值。

在 JavaScript 中使用 onchange

在 JavaScript 中，我们同样可以通过为下拉菜单添加 onchange 事件来获取所选的值。下面是一个示例：

<select id="mySelect">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

<script>
var selectElement = document.getElementById("mySelect");
selectElement.onchange = function() {
  var selectedValue = this.value;
  alert(selectedValue);
};
</script>

与 jQuery 示例相比，这个示例在语法上略微复杂，但原理完全相同。我们同样是为 id 为 mySelect 的下拉菜单添加了 onchange 事件监听器。当用户选择了某个选项后，事件处理函数将通过 this.value 获取所选值，并通过 alert 函数将其弹出。通过这种方式，我们同样可以很方便地获取下拉菜单的所选值。

总结

在 Web 开发中，获取用户下拉菜单所选值是一个常见需求。jQuery 和 JavaScript 提供了不同的方式来实现这一功能。在本文中，我们使用 onchange 事件来演示了如何在 jQuery 和 JavaScript 中获取下拉菜单所选值。通过掌握这个基本技能，我们可以更好地处理各种用户输入，并为用户提供更好的体验。