자바 스크립트 선택 상자의 선택된 텍스트를 얻는 방법

79

이것은 완벽하게 작동합니다

<select name="selectbox" onchange="alert(this.value)">

하지만 텍스트를 선택하고 싶습니다. 나는 이렇게 시도했다

<select name="selectbox" onchange="alert(this.text)">

정의되지 않은 것으로 표시됩니다. DOM을 사용하여 텍스트를 얻는 방법을 찾았습니다. 하지만 저는 이것을 이렇게하고 싶습니다. 저는 this.value를 사용하는 것과 같습니다.

javascript select

— Aajahid
소스

126

this.options[this.selectedIndex].innerHTML

선택한 항목의 "표시된"텍스트를 제공해야합니다. this.value당신이 말했듯이은 단지 value속성 의 값을 제공 합니다.

— 델란 아자 바니
소스

6

나는 그것을 좋아하지 않는다. 현재 브라우저에서 작동한다고 확신하지만 DOM 요소 기반 코드와 구식 양식 조작 코드가 이상하게 혼합되어 있습니다. 객체 options목록을 반환하는데 Option, <option>요소 와 동일한 것으로 지정되어 있는지 확실하지 않습니다 . 작동이 보장되는 text선택된의 유서 깊은 속성 을 사용 Option하는 것이 좋습니다.

— Tim Down

Tim, Option사물은 사물과 동일 HTMLOptionElement합니다. 을 사용하는 것에 반대하는 경우 또는 대신 options사용할 수 있습니다 (정확히 기억할 수 없습니다. 둘 다 작동한다고 생각합니다)childrenchildNodes

— Delan Azabani 2010

1

내가 사용에 찬성 완벽 해요 : 나는 당신이 오해 약간 생각 options하지만 Option앞선 객체 HTMLOptionElement오브젝트를하고 내가 본 어떤 사양은 없습니다 그 의무 Option와 HTMLOptionElement그들이 잘 모두를 지원하는 대부분의 브라우저에서 할 수있다하더라도, 같은 일을해야합니다. 내 요점은 두 가지 스타일을 혼합하지 않는 것이 더 안전하다는 것입니다. 그래서, 내가 선호하는 것 this.options[this.selectedIndex].text또는 기반 노드 기반 것은 selectedIndexIE에서 공백 텍스트 노드에서 필터에 필요에 의해 복잡합니다.

— Tim Down

그것은 아주 좋은 지적입니다. 호기심에서 옵션 노드 내에 텍스트가 아닌 노드가있는 경우를 text반환 innerHTML합니까, 아니면 결합 된 모든 텍스트 노드 만 반환 합니까?

— Delan Azabani 2010-07-05

1

이런 사람들, 투표 무능은 그만! 오데드는 정답을 가지고 있습니다. DOM의 개념을 연구하는 것이 얼마나 어렵습니까? > __>

— John

68

선택한 항목의 값을 얻으려면 다음을 수행 할 수 있습니다.

this.options[this.selectedIndex].text

여기에서 다른 options선택 항목에 액세스하고을 SelectedIndex사용하여 선택한 항목을 선택한 다음text 액세스됩니다.

여기 에서 선택 DOM에 대해 자세히 알아 보세요 .

— 오데드
소스

1

this.options[this.selectedIndex].value과 정확히 동일 this.value합니다. 죄송합니다.

— Delan Azabani

this.options [this.SelectedIndex] .text 오류 콘솔을 사용할 때-오류 : this.options [this.SelectedIndex] is undefined

— Aajahid

3

생산처럼 : 그것 때문에 그건 selectedIndex보다는 SelectedIndex.

— Tim Down

2

또는 재미를 위해 this.selectedOptions[0].text(다중 선택이있는 경우 명백한 확장 포함).

— ruffin

37

이 코드를 시도하십시오 :

$("#YourSelect>option:selected").html()

— 안드레 모라 타
소스

감사합니다! 이 콤보 상자에서 선택한 항목의 값을 반환

— 세이버 tabatabaee 야 즈디

.text ()는 실제로 선택한 텍스트를 반환합니다

— Windrider

33

그냥 사용

$('#SelectBoxId option:selected').text(); 나열된 텍스트 얻기

$('#SelectBoxId').val(); 선택 인덱스 값 가져 오기

— 마빌 조이
소스

2

이것은 jQuery에서 완벽하게 작동하지만 OP는 javascript만을 원래 태그로 나열했습니다. 여전히 많은 사람들이 jQuery를 사용하기 때문에 +1.

— Sablefoste

1

아무도 여기서 jQuery 솔루션을 요구하지 않는다는 것을 알고 있지만 jQuery를 사용하면 다음과 같이 요청할 수 있습니다.$('#selectorid').val()

— Michiel
소스

0

값을 얻으려면 id = "selectBox"가있는 선택 요소에이 코드를 사용할 수 있습니다.

let myValue = document.querySelector("#selectBox").value;

텍스트를 얻으려면이 코드를 사용할 수 있습니다.

var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;

— 마이클 알버스
소스