Retrieving the text of the selected in element Asked Mar 04 '09 at 12:30 Active Dec 27 '21 at 01:45 Viewed 3.6e+01k times 167 0 In the following: <select id="test"> <option value="1">Test One</option> <option value="2">Test Two</option> </select> How can I get the text of the selected option (i.e. "Test One" or "Test Two") using JavaScript document.getElementsById('test').selectedValue returns 1 or 2, what property returns the text of the selected option? javascript html dom edited Oct 01 '15 at 12:19 Tasos K. 7,979 7 39 63 asked Mar 04 '09 at 12:30 CountZero 2,844 4 22 20 14 Answers14 269 function getSelectedText(elementId) { var elt = document.getElementById(elementId); if (elt.selectedIndex == -1) return null; return elt.options[elt.selectedIndex].text; } var text = getSelectedText('test'); edited Apr 12 '20 at 00:32 Sean Bright answered Mar 04 '09 at 12:33 Sean Bright 118,630 17 138 146 brilliant javascript as always! – doniyor Aug 24 '17 at 15:54 3 This answer is outdated, see @davidjb's answer below for a nice HTML5 one-liner. – Christallkeks Jan 17 '18 at 00:42 3 @Christallkeks - the one-liner [throws an exception if nothing is selected](https://jsfiddle.net/mcu4ke23/). fewer lines isn't always better. – Sean Bright Mar 01 '19 at 23:12 90 If you use jQuery then you can write the following code: $("#selectId option:selected").html(); answered Aug 31 '10 at 23:53 arturgrigor 9,361 4 31 31 32 since he wants the text, probably better to use `.text()` – Muhd Oct 28 '11 at 22:38 6 Not to be confused with `$("#selectId option[selected]")`, which will select the option which has the "selected" attribute but might not be currently selected. – mowwwalker Sep 13 '14 at 02:33 seems more complicated.! – NDEthos Dec 18 '15 at 08:40 55 document.getElementById('test').options[document.getElementById('test').selectedIndex].text; answered Nov 16 '11 at 10:30 wormhit 3,687 37 46 It worked for me also, after trying all other options. – mimi May 01 '18 at 15:06 this wordk perfect! – Albert Hidalgo Mar 14 '19 at 19:44 34 Under HTML5 you are be able to do this: document.getElementById('test').selectedOptions[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. edited Jun 18 '18 at 01:29 davidjb answered May 15 '13 at 02:07 davidjb 8,247 3 32 42 +1, meanwhile this is the way to go. The Firefox ticket is fixed and I even bothered opening MS Edge to verify that they support it, too. – Christallkeks Jan 17 '18 at 00:40 29 selectElement.options[selectElement.selectedIndex].text; References: options collection, selectedIndex property: HTML DOM Select Object text property: HTML DOM Option Object exactly the answer of this question: Option text Property answered Aug 15 '13 at 09:02 Easy to understand than the answer @wormhit gave. +1 for simplifying – Jacques Mathieu Jun 22 '17 at 16:29 7 The options property contains all the <options> - from there you can look at .text document.getElementById('test').options[0].text == 'Text One' answered Mar 04 '09 at 12:33 Greg 316,276 54 369 333 6 You can use selectedIndex to retrieve the current selected option: el = document.getElementById('elemId') selectedText = el.options[el.selectedIndex].text edited Jul 22 '17 at 19:59 Erick Petrucelli 14,386 8 64 84 answered Jul 22 '17 at 06:46 jamshid 225 5 12 4 this.options[this.selectedIndex].innerText answered Feb 19 '16 at 09:54 Phani CR 97 1 3 2 If you found this thread and wanted to know how to get the selected option text via event here is sample code: alert(event.target.options[event.target.selectedIndex].text); answered Jul 30 '15 at 22:10 zeros-and-ones 4,227 6 35 54 2 Use the select list object, to identify its own selected options index. From there - grab the inner HTML of that index. And now you have the text string of that option. <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> edited Mar 17 '17 at 02:52 answered Sep 02 '16 at 19:10 Add some explanation – HaveNoDisplayName Sep 02 '16 at 19:47 `.innerHTML` gets all children and their attributes. Whilst it works when an element has no children, if you have an element with children it returns way more than is intended. – hipkiss Sep 30 '16 at 12:47 1 How many "children" do you expect to have in-between your Children? tags? – Sep 30 '16 at 16:52 1 The :checked selector can be used with document.querySelector to retrieve the selected option. let selectedText = document.querySelector('#selectId option:checked').text; // or let selectedText = document.querySelector('#selectId') .querySelector('option:checked').text; document.querySelector('button').addEventListener('click', function(e) { console.log(document.querySelector('#selectId option:checked').text); }); <select id="selectId"> <option>a</option> <option>b</option> <option>c</option> </select> <button> Get selected text </button> For select elements with the multiple attribute, document.querySelectorAll can be used to obtain all selected options. let selectedText = [...document.querySelectorAll('#selectId option:checked')] .map(o => o.text); document.querySelector('button').addEventListener('click', function(e) { let selectedText = [...document.querySelectorAll('#selectId option:checked')] .map(o => o.text); console.log(selectedText); }); <select id="selectId" multiple> <option>a</option> <option>b</option> <option>c</option> </select> <button> Get selected text </button> edited Aug 08 '21 at 02:34 Unmitigated answered Aug 03 '21 at 14:49 Unmitigated 76,500 11 62 80 0 Similar to @artur just without jQuery, with plain javascript: // Using @Sean-bright's "elt" variable var selection=elt.options[elt.selectedIndex].innerHTML; answered Mar 15 '13 at 12:51 viditkothari 90 11 0 Easy, simple way: const select = document.getElementById('selectID'); const selectedOption = [...select.options].find(option => option.selected).text; answered Sep 10 '18 at 13:55 Paweł Bednarczyk 13 1 5 1 While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Luca Kiebel Sep 10 '18 at 14:33 1 I don't see how this is easy or simple. Why would you use `find()` when you already know the index of the selected item? Also, if there is no selected item (``), this will generate an error. – Sean Bright Mar 01 '19 at 23:21

Answer 1

It is pretty simple. In javascript anything with an ID doesn't need document.queryselector or $('#test') you can just use 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.

let selectedItems = [];
for ( var i = 0; i < test.selectedOptions.length; i++) {
    selectedItems.push(test.selectedOptions[i].text);
}

Also

// if you want values
selectedItems.push(test.selectedOptions[i].value);