web-dev-qa-db-ja.com

<select>要素で選択した<option>のテキストを取得する

以下では：

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

JavaScriptを使用して、選択したオプション（「テスト1」または「テスト2」）のテキストを取得するにはどうすればよいですか

document.getElementsById('test').selectedValueは1または2を返します。どのプロパティが選択したオプションのテキストを返しますか？

javascripthtmldom
150
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');
248
Sean Bright

JQueryを使用する場合、次のコードを記述できます。

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

参照：

27
user669677

HTML5では、これを行うことができます。

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

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions のMDNのドキュメントは、Chromeを含む完全なクロスブラウザーサポート（少なくとも2017年12月現在）を示しています、Firefox、Edgeおよびモバイルブラウザー、ただしInternet Explorerを除く。

21
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
5
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

JQueryなしの@arturと同様、プレーン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