在 < select > element 中检索所选 < option > 的文本

下列各项:

<select id="test">
<option value="1">Test One</option>
<option value="2">Test Two</option>
</select>

如何使用 JavaScript 获取所选选项(即“ Test One”或“ Test Two”)的文本

document.getElementsById('test').selectedValue返回1或2，什么属性返回所选选项的文本？

356790 次浏览
小开

options属性包含所有的 <options>-从那里你可以看到 .text

document.getElementById('test').options[0].text == 'Text One'
小开
最佳答案 
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;
小开

类似于@artur，只是没有 jQuery，只有普通的 javascript:

//使用@Sean-bright 的“ elt”变量

var selection=elt.options[elt.selectedIndex].innerHTML;
小开

在 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;

参考文献:

小开

如果你发现这个线程，并想知道如何通过事件获得选择的选项文本，这里是示例代码:

alert(event.target.options[event.target.selectedIndex].text);
小开

This. options [ this. selectedIndex ] . innerText

小开

使用选择列表对象来标识它自己选择的选项索引。 从那里-抓取该索引的内部 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>
小开

您可以使用 selectedIndex检索当前选定的 option:

el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text
小开

简单，简单的方法:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
小开

: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>

小开

很简单。在 javascript 中，任何带 ID 的东西都不需要 document.queryselector或者 $('#test')，你只需要使用 test。然后您只需循环遍历 selectedOptions，它是 javascript 的一部分，您可以将它添加到一个新的数组中，并按照您的需要使用该数据。

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);

提交答案