it-swarm.com.ru

Извлечение текста выбранного <option> в элементе <select>

В следующих: 

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

Как я могу получить текст выбранной опции (т. Е. «Test One» или «Test Two»), используя JavaScript

document.getElementsById('test').selectedValue возвращает 1 или 2, какое свойство возвращает текст выбранного параметра?

145
CountZero
function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');
243
Sean Bright

Если вы используете jQuery, вы можете написать следующий код:

$("#selectId option:selected").html();
84
arturgrigor
document.getElementById('test').options[document.getElementById('test').selectedIndex].text;
52
wormhit
selectElement.options[selectElement.selectedIndex].text;

Рекомендации:

26
user669677

Под HTML5 вы сможете сделать это:

document.getElementById('test').selectedOptions[0].text

Документация MDN по адресу https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions указывает на полную межбраузерную поддержку (по крайней мере на декабрь 2017 года), включая Chrome, Firefox, Краевые и мобильные браузеры, но исключая Internet Explorer.

20
davidjb

Свойство options содержит все <options> - отсюда вы можете посмотреть .text

document.getElementById('test').options[0].text == 'Text One'
6
Greg

Вы можете использовать selectedIndex для получения текущего выбранного option:

el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text
4
jamshid

this.options [this.selectedIndex] .innerText

3
Phani CR

Если вы нашли эту ветку и хотели узнать, как получить выбранный текст опции через событие, вот пример кода:

alert(event.target.options[event.target.selectedIndex].text);
2
zeros-and-ones

Используйте объект списка выбора, чтобы определить его собственный индекс выбранных опций . Оттуда - захватить внутренний 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>
1
Creeperstanson

Аналогично @artur, только без jQuery, с простым javascript:

// Используя переменную @ Sean-bright "elt"

var selection=elt.options[elt.selectedIndex].innerHTML;
0
viditkothari

Простой, простой способ:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
0
Paweł Bednarczyk