当前位置：首页 > article >正文

js获取下拉单选框的值和显示的值

article 2025/1/6 20:34:59

在HTML中，通常下拉框是通过元素实现的，其选项通过元素定义。以下是使用 JavaScript 和 jQuery 获取下拉框的值（value）和显示的文本的方法：

HTML 示例

<select id="mySelect">
  <option value="1">苹果</option>
  <option value="2">香蕉</option>
  <option value="3">橙子</option>
</select>

JavaScript 获取值和显示文本

1. 获取选中项的值

var selectElement = document.getElementById("mySelect");
var selectedValue = selectElement.value; // 获取选中的值
console.log("选中的值是: " + selectedValue);

2. 获取选中项的显示文本

var selectedText = selectElement.options[selectElement.selectedIndex].text; // 获取显示文本
console.log("选中的显示文本是: " + selectedText);

jQuery 获取值和显示文本

1. 获取选中项的值

var selectedValue = $("#mySelect").val(); // 获取选中的值
console.log("选中的值是: " + selectedValue);

2. 获取选中项的显示文本

var selectedText = $("#mySelect option:selected").text(); // 获取显示文本
console.log("选中的显示文本是: " + selectedText);

综合示例
完整示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>获取下拉框的值和显示文本</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <select id="mySelect">
    <option value="1">苹果</option>
    <option value="2">香蕉</option>
    <option value="3">橙子</option>
  </select>
  <button id="getValues">获取值和显示文本</button>

  <script>
    // 使用 JavaScript
    document.getElementById("getValues").addEventListener("click", function() {
      var selectElement = document.getElementById("mySelect");
      var selectedValue = selectElement.value; // 获取选中的值
      var selectedText = selectElement.options[selectElement.selectedIndex].text; // 获取显示文本

      console.log("JavaScript 方式: ");
      console.log("选中的值是: " + selectedValue);
      console.log("选中的显示文本是: " + selectedText);
    });

    // 使用 jQuery
    $("#getValues").on("click", function() {
      var selectedValue = $("#mySelect").val(); // 获取选中的值
      var selectedText = $("#mySelect option:selected").text(); // 获取显示文本

      console.log("jQuery 方式: ");
      console.log("选中的值是: " + selectedValue);
      console.log("选中的显示文本是: " + selectedText);
    });
  </script>
</body>
</html>