回答:
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();
.text()
$("#selectId option[selected]")
「selected」属性を持つオプションが選択されますが、現在は選択されていない可能性があります。
selectElement.options[selectElement.selectedIndex].text;
参照:
HTML5でこれを行うことができます:
document.getElementById('test').selectedOptions[0].text
MDNのドキュメント(https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions)には、Chrome、Firefox、Edge、モバイルブラウザーを含む完全なクロスブラウザーサポート(2017年12月現在)が示されています、ただしInternet Explorerは除く。
選択リストオブジェクトを使用して、独自の選択オプションインデックスを識別します。そこから-そのインデックスの内部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>
.innerHTML
すべての子とその属性を取得します。要素に子がない場合に機能しますが、子を持つ要素がある場合、意図したよりも多くの値を返します。
単純なjavascriptを使用した、jQueryなしの@arturと同様:
// @ Sean-brightの「elt」変数を使用
var selection=elt.options[elt.selectedIndex].innerHTML;
簡単でシンプルな方法:
const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
find()
選択したアイテムのインデックスがわかっているのに、なぜ使用するのですか?また、選択されているアイテムがない場合(<select multiple>
)、エラーが発生します。