<select> 요소에서 선택한 <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를 반환합니다. 선택한 옵션의 텍스트를 반환하는 속성은 무엇입니까?

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의 문서는 Chrome, Firefox, Edge 및 모바일 브라우저를 포함한 완전한 브라우저 간 지원 (최소 2017 년 12 월 기준)을 나타냅니다. , 그러나 Internet Explorer는 제외됩니다.

selectElement.options[selectElement.selectedIndex].text;

참조 :

• options 컬렉션, selectedIndex 속성 : HTML DOM Select Object
• 텍스트 속성 : HTML DOM 옵션 객체
• 이 질문에 대한 답 : 옵션 텍스트 속성

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

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;