获取所选选项 js 的文本

在开发 Web 应用程序时，经常需要获取用户选择的选项文本。无论是在表单、下拉菜单还是复选框中，都需要对选项进行处理。本文将介绍如何使用 JavaScript 获取所选选项的文本。

获取下拉菜单选项的文本

下拉菜单是常用的选择器，HTML 提供了 select 元素来创建下拉菜单。

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

要获取所选选项的文本，可以使用 selectedIndex 属性来确定选择的选项索引，然后使用 options 属性获取选项元素的数组，最后使用选项元素的 text 属性获取文本。

const selectElement = document.getElementById("mySelect");
const selectedIndex = selectElement.selectedIndex;
const selectedOption = selectElement.options[selectedIndex];
const selectedText = selectedOption.text;

获取复选框选项的文本

复选框是一种常用的多选器，HTML 提供了 input 元素来创建复选框。

<input type="checkbox" id="option1" value="1">
<label for="option1">Option 1</label>

<input type="checkbox" id="option2" value="2">
<label for="option2">Option 2</label>

<input type="checkbox" id="option3" value="3">
<label for="option3">Option 3</label>

要获取所选选项的文本，可以使用 querySelectorAll 方法选择所有选中的复选框元素，然后使用 nextSibling 属性获取其后面的 label 元素。

const checkedOptions = document.querySelectorAll("input[type=checkbox]:checked");
const selectedTexts = Array.from(checkedOptions).map(checkbox => checkbox.nextSibling.textContent);

获取单选框选项的文本

单选框是一种常用的单选器，HTML 也是使用 input 元素来创建单选框。

<input type="radio" id="option1" name="myRadio" value="1">
<label for="option1">Option 1</label>

<input type="radio" id="option2" name="myRadio" value="2">
<label for="option2">Option 2</label>

<input type="radio" id="option3" name="myRadio" value="3">
<label for="option3">Option 3</label>

要获取所选选项的文本，可以使用 querySelector 方法选择选中的单选框元素，然后使用 nextSibling 属性获取其后面的 label 元素。

const selectedOption = document.querySelector("input[type=radio]:checked");
const selectedText = selectedOption.nextSibling.textContent;

以上是获取所选选项 js 的文本的方法，希望能对你有所帮助。