한 하는 중한 하는 중한 하는 중인에인에인에

한 하는 중인에 element 요소In the following: 다음 내용:<select id="test"> <id="test" 선택> <option value="1"<옵션 값="1">Test One</option> >테스트 원 </옵션> <option value="2"<옵션 값="2">Test Two</option> >테스트 투</옵션></select> </select> How can I get the text of the selected option (i.e. "Test One" or "Test Two") using JavaScript 자바스크립트를 사용하여 선택한 옵션(즉, "테스트 원" 또는 "테스트 투")의 텍스트를 가져오려면 어떻게 해야 합니까?document.getElementsById('test').document.getElementsById('test')를 선택합니다.selectedValue returns 1 or 2, what property returns the text of the selected option?선택한 값이 1 또는 2를 반환합니다. 선택한 옵션의 텍스트를 반환하는 속성은 무엇입니까?function getSelectedText(elementId) { 함수 getSelectedText(elementId) { var elt = document.getElementById(elementId); valt = document.getElementById(elementId); if (elt.selected(elt.선택된) 경우Index == -1) 지수 == -1) return null; null을 반환합니다. return elt.options[elt.selected반품 elt. options[elt.selected]Index].색인].text; 텍스트;} } var text = getSelectedText('test');var text = getSelectedText('test'); If you use jQuery then you can write the following code: jQuery를 사용하면 다음 코드를 작성할 수 있습니다.$("#selectId option:selected").html(); $("#selectId option:selected").html();document.getElementById('test').options[document.getElementById('test').document.getElementById('test').options[document.getElementById('test')].selected선택된Index].색인].text; 텍스트;Under HTML5 you are be able to do this: HTML5에서는 다음을 수행할 수 있습니다.document.getElementById('test').document.getElementById('test')를 입력합니다.selectedOptions[0].선택한 옵션[0].text 본문 MDN's documentation at https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions indicates full cross-browser support (as of at least December 2017), including Chrome, Firefox, Edge and mobile browsers, but excluding Internet Explorer.https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions 의 MDN 문서에는 Internet Explorer를 제외하고 크롬, Firefox, Edge 및 모바일 브라우저를 포함한 전체 browser 간 지원(최소 2017년 12월 기준)이 나와 있습니다.selectElement.options[selectElement.Element.options[Element]를 선택합니다.selected선택된Index].색인].text; 텍스트; References: 참조: options collection, selected옵션 모음, 선택됨Index property: HTML DOM Select Object 인덱스 속성: HTML DOM Select Object text property: HTML DOM Option Object 텍스트 속성: HTML DOM 옵션 개체 exactly the answer of this question:이 질문의 정확한 답: Option text Property 옵션 텍스트 속성The options property contains all the <options> - from there you can look at .text options 속성에는 모든 <options>가 포함되어 있습니다. 여기서 .text를 확인할 수 있습니다.document.getElementById('test').options[0].document.getElementById('test').options[0].text == 'Text One' text == 'text one'You can use selected선택한 것을 사용할 수 있습니다.Index to retrieve the current selected option: 현재 선택한 옵션을 검색하는 색인:el = document.getElementById('elemId') el = document.getElementById('elemId')selected선택된Text = el.options[el.본문 = el. options[el].selected선택된Index].색인].text 본문this.options[this.이것. options[이것]selected선택된Index].색인].innerTextIf you found this thread and wanted to know how to get the selected option text via event here is sample code: innerText이 스레드를 찾으셨고 이벤트를 통해 선택한 옵션 텍스트를 얻는 방법을 알고 싶으시다면 샘플 코드:alert(event.target.options[event.target.alert(event.target.options[event.target]).selected선택된Index].색인].text); text);Use the select list object, to identify its own selected options index.선택 목록 개체를 사용하여 선택한 옵션 인덱스를 식별합니다. From there - grab the inner HTML of that index.여기서 해당 인덱스의 내부 HTML을 가져옵니다. And now you have the text string of that option.이제 해당 옵션의 텍스트 문자열이 표시됩니다. <select onchange="alert(this.options[this.< select on change=" alert (this.options [this.selected선택된Index].색인].innerHTML);"> innerHTML);"> <option value="">Select Actions</option> <option value="">액션 선택</option> <option value="1">Print PDF</option> <option value="1">PDF인쇄</option> <option value="2">Send Message</option> <option value="2">메시지 보내기</option> <option value="3">Request Review</option> <option value="3">리뷰요청</option> <option value="4"<옵션 값="4">Other Possible Actions</option> >기타 가능한 액션 </옵션> </select></select> The :checked selector can be used with document.:checked selector는 문서와 함께 사용할 수 있습니다.querySelector to retrieve the selected option.query선택한 옵션을 검색합니다. let selected선택하게 해주세요Text = document.텍스트 = 문서.querySelector('#selectId option:checked').querySelector('#selectId 옵션:checked').text; 텍스트;// or // 아니면let selected선택하게 해주세요Text = document.텍스트 = 문서.querySelector('#selectId') querySelector('#selectId') .querySelector('option:checked')..querySelector('옵션: checked').text; 텍스트; document.문서.querySelector('button').addEventListener('click', function(e) { querySelector('버튼').AddEventListener('클릭'), function(e) { console.log(document.console.log(document).querySelector('#selectId option:checked').text);querySelector('#selectId option:checked'.text);; }); }); <select id="selectId"> <select id="selectId"> <option>a</option> <옵션>a</옵션> <option>b</option> <옵션>b</옵션> <option>c</option> <옵션>c</옵션></select> </select><button><버튼> Get selected text 선택한 텍스트 가져오기</button> </버튼> For select elements with the multiple attribute, document.다중 속성을 가진 선택 요소의 경우, 문서.querySelector쿼리선택기All can be used to obtain all selected options.All을 사용하면 선택한 모든 옵션을 얻을 수 있습니다. let selected선택하게 해주세요Text = [...document.텍스트 = [... document].querySelectorAll('#selectId option:checked')] querySelectorAll('#selectId 옵션:checked')] .map(o => o.text); .map(o => o.text); document.문서.querySelector('button').addEventListener('click', function(e) { querySelector('버튼').AddEventListener('클릭'), function(e) { let selected선택하게 해주세요Text = [...document.텍스트 = [... document].querySelectorAll('#selectId option:checked')] querySelectorAll('#selectId 옵션:checked')] .map(o => o.text); .map(o => o.text); console.log(selectedText);console.log(선택한 텍스트); }); }); <select id="selectId" multiple> <select id="selectId" multiple> <option>a</option> <옵션>a</옵션> <option>b</option> <옵션>b</옵션> <option>c</option> <옵션>c</옵션></select> </select><button><버튼> Get selected text 선택한 텍스트 가져오기</button> </버튼> Similar to @artur just without jQuery, with plain javascript: jQuery가 없는 @artur와 유사하며, 일반 자바스크립트가 있습니다.// Using @Sean-bright's "elt" variable // @Sean-bright의 "elt" 변수 사용var selection=elt.options[elt.selectedvar selection=elt. options[elt.selected]Index].색인].innerHTML; 내부 HTML;Easy, simple way: 쉽고 간단한 방법:const select = document.getElementById('selectconst select = document.getElementById('select')를 선택합니다.ID'); ID');const selectedOption = [...constelected옵션 = [...]select.options].선택합니다. options].find(option => option.find (option = > option).selected).선택).text; 텍스트;It is pretty simple.아주 간단합니다. In javascript anything with an ID doesn't need document.자바스크립트에서 아이디가 있는 것은 문서가 필요 없습니다.queryselector or $('#test') you can just use test.query selector 또는 $('#test') 테스트를 사용하면 됩니다. Then you simply loop over the selectedOptions which is apart of javascript and you can add it to a new array and use that data how ever you want.그런 다음 javascript의 일부인 Options를 선택한 후 새로운 배열에 추가하고 원하는 대로 해당 데이터를 사용할 수 있습니다. let selected선택하게 해주세요Items = []; 항목 = [];for ( var i = 0; i < test.( vari = 0; i < test.selectedOptions.length; i++) { selectedOptions.length; i++) { selected선택된Items.push(test.Items.push(테스트).selectedOptions[i].선택한 옵션[i].text); text);} } Also 또한.// if you want values // 가치를 원한다면selected선택된Items.push(test.Items.push(테스트).selectedOptions[i].선택한 옵션[i].value);value); Reference언급URL : https://stackoverflow.com/questions/610336/retrieving-the-text-of-the-selected-option-in-select-elementURL : https://stackoverflow.com/questions/610336/retrieving-the-text-of-the-selected-option-in-select-element