博客

如何使用jQuery从下拉列表中获取选定的文本

  • Post category:jquery

获取下拉列表中选定的文本，其实就是通过jQuery来获取下拉列表的值。可以通过以下步骤来实现：

步骤1：引入jQuery库

在代码中引入jQuery库，比如：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

步骤2：编写HTML代码

编写下拉列表的HTML代码，比如：

<select id="mySelect">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

步骤3：编写jQuery代码

编写jQuery代码，获取下拉列表选定的文本，比如：

// 获取选中的文本
var selectedText = $('#mySelect option:selected').text();

// 获取选中的值
var selectedValue = $('#mySelect option:selected').val();

console.log(selectedText);
console.log(selectedValue);

示例1：获取选中的文本

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>获取选中的文本示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select id="mySelect">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<script>
  $('#mySelect').change(function() {
    var selectedText = $('#mySelect option:selected').text();
    console.log(selectedText);
  });
</script>
</body>
</html>

示例2：获取选中的值

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>获取选中的值示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select id="mySelect">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<script>
  $('#mySelect').change(function() {
    var selectedValue = $('#mySelect option:selected').val();
    console.log(selectedValue);
  });
</script>
</body>
</html>

以上就是使用jQuery从下拉列表中获取选定的文本的攻略。

Tags: