📌  相关文章
📜  如何使用 JavaScript 按值获取选项标签的文本？(1)

📅  最后修改于: 2023-12-03 15:23:53.196000             🧑  作者: Mango

如何使用 JavaScript 按值获取选项标签的文本？

在前端开发中，经常需要获取下拉框中选中的选项标签的文本。本文将介绍如何使用 JavaScript 按值获取选项标签的文本。

HTML

首先，我们需要在 HTML 中定义一个下拉框，包含若干个选项标签，如下：

<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
JavaScript

我们可以使用以下代码获取选中的选项标签的文本：

var select = document.getElementById("mySelect");  // 获取下拉框元素
var option = select.options[select.selectedIndex]; // 获取选中的选项标签元素
var text = option.text;                            // 获取选项标签的文本

我们可以把以上三行代码封装成一个函数，方便调用：

function getSelectedText() {
  var select = document.getElementById("mySelect");  // 获取下拉框元素
  var option = select.options[select.selectedIndex]; // 获取选中的选项标签元素
  var text = option.text;                            // 获取选项标签的文本
  return text;                                       // 返回文本
}
示例

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get Selected Text</title>
</head>
<body>

<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<p>Click the button to get the selected text of the dropdown list.</p>

<button onclick="alert(getSelectedText())">Try it</button>

<script>
function getSelectedText() {
  var select = document.getElementById("mySelect");  // 获取下拉框元素
  var option = select.options[select.selectedIndex]; // 获取选中的选项标签元素
  var text = option.text;                            // 获取选项标签的文本
  return text;                                       // 返回文本
}
</script>

</body>
</html>
总结

使用以上代码，我们可以轻松地按值获取选项标签的文本。同时，我们也可以根据类似的方法获取其他表单元素的值。