[英]get text inside element, if element contains select get selected option
[英]Retrieving the text of the selected <option> in <select> element
在下面的:
<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
位于https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions 的MDN 文档表明完全跨浏览器支持(至少截至 2017 年 12 月),包括 Chrome、Firefox、Edge 和移动浏览器,但不包括 Internet Explorer。
selectElement.options[selectElement.selectedIndex].text;
参考资料:
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>
:checked
选择器可以与document.querySelector
一起使用来检索选定的选项。
let selectedText = document.querySelector('#selectId option:checked').text;
// or
let selectedText = document.querySelector('#selectId')
.querySelector('option:checked').text;
document.querySelector('button').addEventListener('click', function(e) { console.log(document.querySelector('#selectId option:checked').text); });
<select id="selectId"> <option>a</option> <option>b</option> <option>c</option> </select> <button> Get selected text </button>
对于具有multiple
属性的 select 元素,可以使用document.querySelectorAll
获取所有选中的选项。
let selectedText = [...document.querySelectorAll('#selectId option:checked')]
.map(o => o.text);
document.querySelector('button').addEventListener('click', function(e) { let selectedText = [...document.querySelectorAll('#selectId option:checked')] .map(o => o.text); console.log(selectedText); });
<select id="selectId" multiple> <option>a</option> <option>b</option> <option>c</option> </select> <button> Get selected text </button>
类似于没有 jQuery 的 @artur,带有普通的 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;
这很简单。 在 javascript 中,任何带有 ID 的东西都不需要document.queryselector
或$('#test')
你可以只使用测试。 然后,您只需遍历 JavaScript 之外的 selectedOptions,您就可以将其添加到一个新数组中,并根据需要使用该数据。
let selectedItems = [];
for ( var i = 0; i < test.selectedOptions.length; i++) {
selectedItems.push(test.selectedOptions[i].text);
}
还
// if you want values
selectedItems.push(test.selectedOptions[i].value);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.