在前端开发中，我们经常需要获取用户在Select下拉框中选择的文本值。本文将介绍JavaScript中如何获取Select选项中文本值的几种方法。
1. 使用selectedIndex属性和options对象
我们可以使用Select元素的selectedIndex属性和options对象来获取选中的文本值。详细步骤如下：
获取Select元素对象
const select = document.getElementById('my-select'); //根据id获取Select元素对象获取选中的索引值
const selectedIndex = select.selectedIndex;
获取选中的option对象
const selectedOption = select.options[selectedIndex];
获取选中的文本值
const selectedText = selectedOption.text;
完整代码示例：
-- -------------------- ---- ------- ------- --------------- ------- ---------------------------- ------- ------------------------------ ------- ------------------------------ --------- ------- ------------------------------- -------- ------------- -------- -------- ----------------- - ----- ------ - ------------------------------------- ----- ------------- - --------------------- ----- -------------- - ------------------------------ ----- ------------ - -------------------- -------------------------- - ---------
2. 使用value属性和selected属性
另外一种获取Select选项中文本值的方法是通过选中选项的value属性和selected属性。详细步骤如下：
获取Select元素对象
const select = document.getElementById('my-select'); //根据id获取Select元素对象获取选中的option对象
const selectedOption = select.options[select.selectedIndex];
获取选中的文本值
const selectedText = selectedOption.value;
完整代码示例：
-- -------------------- ---- ------- ------- --------------- ------- ---------------------------- ------- ------------------------------ ------- ------------------------------ --------- ------- ------------------------------- -------- ------------- -------- -------- ----------------- - ----- ------ - ------------------------------------- ----- -------------- - ------------------------------------- ----- ------------ - --------------------- -------------------------- - ---------
3. 结合jQuery使用val()方法
如果你在项目中使用jQuery，可以借助其提供的val()方法方便地获取Select选项中文本值。代码如下：
const selectedText = $('#my-select option:selected').text();完整代码示例：
-- -------------------- ---- ------- ------- --------------- ------- ---------------------------- ------- ------------------------------ ------- ------------------------------ --------- ------- ------------------------------- -------- ------------- ------- ----------------------------------------------------------- -------- -------- ----------------- - ----- ------------ - ------------- ------------------------- -------------------------- - ---------
这些方法都可以帮助你在JavaScript中获取Select选项中文本值，选择合适的方式将有助于提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1477