如何使用 jQuery 在选择框中显示选定的值 - JavaScript

当用户从下拉选择框中选取一个选项时，我们通常会需要将其选定的值显示在页面上。幸运的是，使用 jQuery，我们可以轻松地实现这个功能。

HTML

首先，我们需要有一个下拉选择框和一个用于显示选定值的元素。以下是一个示例 HTML 代码：

<select class="select-box">
  <option value="option-1">选项1</option>
  <option value="option-2">选项2</option>
  <option value="option-3">选项3</option>
  <option value="option-4">选项4</option>
</select>

<div id="selected-value"></div>

JavaScript

我们需要编写一些 JavaScript 代码，以便在用户从下拉选择框中选取一个选项时，显示其选定的值。以下是一个使用 jQuery 实现的示例代码：

$(function() {
  // 获取下拉选择框
  var selectBox = $('.select-box');

  // 绑定 change 事件监听器
  selectBox.on('change', function() {
    // 获取选定的值
    var selectedValue = selectBox.val();

    // 显示选定的值
    $('#selected-value').text(selectedValue);
  });
});

解释

• 首先，我们使用 jQuery 的 $(function(){}) 函数，确保在文档准备就绪时执行代码。
• 然后，我们使用选择器获取下拉选择框，将其存储在变量 selectBox 中。
• 接下来，我们使用 .on() 方法，为 selectBox 元素绑定 change 事件监听器。每当用户从下拉选择框中选取一个选项时，change 事件将被触发。
• 在事件监听器中，我们使用 .val() 方法获取选定的值，并将其存储在变量 selectedValue 中。
• 最后，我们使用 .text() 方法将选定的值显示在元素 #selected-value 中。

结论

使用 jQuery，在选择框中显示选定的值非常容易。我们可以使用简单的 JavaScript 代码，并在用户选择选项时更新显示的值。