如何在JavaScript中获取select对象的文本值？

2025-01-15 阅读 248 评论 5 点赞 280

摘要：什么是selectselectobject 是一个标签，它提供了一个用于显示下拉选项并允许用户进行选择的界面。将选项标签作为子元素添加到选择标签。此选项标签成为一个选择。可以指定两个选项：要在 HTML 上显示的值和文本。例如，要选择一个年级，请将值设置为“1”并将文本设置为“一

什么是select

selectobject 是一个标签，它提供了一个用于显示下拉选项并允许用户进行选择的界面。

将选项标签作为子元素添加到选择标签。此选项标签成为一个选择。

<select>
  <option></option>
  <option></option>
</select>

可以指定两个选项：要在 HTML 上显示的值和文本。

例如，要选择一个年级，请将值设置为“1”并将文本设置为“一年级”。该值应该是易于以编程方式处理的值。文本使用人类可读的值。

获取文本值的写法

选择选项卡的处理方式与其他选项卡略有不同。因为你真正要处理的是下拉选择的选项的值。

select 标签有一种机制可以识别实际选择的元素（选项）。那就是 selectedIndex。它是一种可以获取选定索引并像数组一样返回从 0 开始的目标索引的方法。

使用它来获取所选选项的值和文本。

如何在JavaScript中获取select对象的文本值？

获取选择对象的文本值

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body> 
    <p>血型：
      <select id="blood" name="blood">
        <option value="A">A型</option>
        <option value="B">B型</option>
        <option value="O">O型</option>
        <option value="AB">AB型</option>
      </select>
    </p>
    <p id="selectblood"></p>
  </body>
  <script>
    var blood = document.getElementById('blood');
    blood.addEventListener('change', (event) => {
      var selectblood = document.getElementById('selectblood');
      selectblood.textContent = blood.options[blood.selectedIndex].value + ":" + blood.options[blood.selectedIndex].textContent;
    });
  </script>
</html>