jQuery HTML Select Selected Get Text

介绍

本文将向您介绍如何使用jQuery从HTML选择元素中获取所选项的文本。在本文中，我们将学习选择HTML下拉列表，获取其选择的选项，并获取所选选项的文本。

HTML Select 元素

HTML select 元素用于创建下拉菜单，其中包含多个选项。下面是创建一个select元素的示例代码。

<select id="mySelect">
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Orange</option>
</select>

在此代码中，我们创建了一个select元素，并包含三个选项。

获取所选项的值

您可以使用以下代码获取下拉列表中所选择的选项的值。

var selectedValue = $('#mySelect').val();

在此代码中，我们使用 jQuery 的 val() 方法获取了所选选项的值，并将其赋值给 selectedValue 变量。

获取所选项的文本

您可以使用以下代码获取下拉列表中所选择的选项的文本。

var selectedText = $('#mySelect option:selected').text();

在此代码中，我们使用 jQuery 的 text() 方法获取所选选项的文本，并将其赋值给 selectedText 变量。

组合示例代码

以下是在代码中组合上述代码段的示例代码。

$(document).ready(function() {
  $('#mySelect').change(function() {
    var selectedValue = $('#mySelect').val();
    var selectedText = $('#mySelect option:selected').text();
    console.log('Selected Value: ' + selectedValue);
    console.log('Selected Text: ' + selectedText);
  });
});

在此代码中，我们为select元素添加了一个change事件侦听器。当选择发生更改时，我们使用我们之前讨论的方法来获取所选项的值和文本，并将它们打印到开发人员控制台中。

结论

本文介绍了如何使用 jQuery 从 HTML 选择元素中获取所选项的文本。您现在已经了解了如何选择 HTML 下拉列表，获取其选择的选项，并获取所选选项的文本。