在下面的:
<select id="test">
<option value="1">Test One</option>
<option value="2">Test Two</option>
</select>
如何使用JavaScript获取所选选项的文本(即“测试一”或“测试二”)
document.getElementsById('test').selectedValue
返回1或2,哪个属性返回所选选项的文本?
function getSelectedText(elementId) {
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1)
return null;
return elt.options[elt.selectedIndex].text;
}
var text = getSelectedText('test');
如果您使用jQuery,则可以编写以下代码:
$("#selectId option:selected").html();
document.getElementById('test').options[document.getElementById('test').selectedIndex].text;
在HTML5下,您可以执行以下操作:
document.getElementById('test').selectedOptions[0].text
MDN的文档位于https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLSelectElement/selectedOptions,表明已全面支持跨浏览器(至少于2017年12月),包括Chrome,Firefox,Edge和移动浏览器,但不包括Internet Explorer。
selectElement.options[selectElement.selectedIndex].text;
参考文献:
- options集合,selectedIndex属性:HTML DOM选择对象
- 文本属性:HTML DOM选项对象
- 正是这个问题的答案:选项文本属性
该options
属性包含所有<options>
-从此处可以查看.text
document.getElementById('test').options[0].text == 'Text One'
您可以使用selectedIndex
来检索当前选定的option
:
el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text
this.options [this.selectedIndex] .innerText
如果您找到了该线程,并且想知道如何通过事件获取选定的选项文本,请参见以下示例代码:
alert(event.target.options[event.target.selectedIndex].text);
使用选择列表对象来标识其自己的选择选项索引。从那里-获取该索引的内部HTML。现在,您有了该选项的文本字符串。
<select onchange="alert(this.options[this.selectedIndex].innerHTML);">
<option value="">Select Actions</option>
<option value="1">Print PDF</option>
<option value="2">Send Message</option>
<option value="3">Request Review</option>
<option value="4">Other Possible Actions</option>
</select>
类似于@artur,仅使用jQuery,仅使用普通javascript:
//使用@ Sean-bright的“ elt”变量
var selection=elt.options[elt.selectedIndex].innerHTML;
简单的方法:
const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
本文地址:http://javascript.askforanswer.com/jiansuoyuansuzhongsuoxuandewenben.html
文章标签:dom , html , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:dom , html , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!