Getting the text from a drop-down box

Question

This gets the value of whatever is selected in my dropdown menu.

document.getElementById('newSkill').value

I cannot however find out what property to go after for the text that's currently displayed by the drop down menu. I tried "text" then looked at W3Schools but that didn't have the answer, does anybody here know?

For those not sure, here's the HTML for a drop down box.

<select name="newSkill" id="newSkill">
    <option value="1">A skill</option>
    <option value="2">Another skill</option>
    <option value="3">Yet another skill</option>
</select>

Patrick McElhaney · Accepted Answer · 2008-10-02T13:24:05.037

151

Based on your example HTML code, here's one way to get the displayed text of the currently selected option:

var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;

edited Oct 02 '08 at 13:24

answered Aug 08 '08 at 13:54

Patrick McElhaney

57,901
40
134
167

4

For those late to the party, there were several suggestions but nobody noticed that they said .value where they should say .text, a confusing day for us all it was. – Teifion Sep 19 '08 at 10:59

score 22 · Answer 2 · edited Oct 25 '21 at 12:28

22

Simply You can use jQuery instead of JavaScript

$("#yourdropdownid option:selected").text();

Try This.

edited Oct 25 '21 at 12:28

Rizwan

103
4
24

answered May 23 '17 at 09:26

BOBIN JOSEPH

1,012
8
25

3

The original question does not mention JQuery. Those of us who do not use JQuery would usually prefer answers not to reference it unless the question references or tags it. This is especially the case when there is a relatively concise solution like that given by Patrick McElhaney. – cazort Apr 02 '19 at 18:50
2

@cazort On the contrary. I needed to know how to do this with JQuery and this answer provided me with what I needed to know, therefore it was very useful (and good) of Bobin Joseph to include it as an answer. – Broken Man Oct 28 '19 at 11:01
@cazort Patrick answer is 13 years old man – JCIsola Apr 16 '21 at 01:25
@JCIsola I don't care how old Patrick's answer is, I care whether it works without additional software packages. It works in all modern browsers and if anything it's better nowadays because the old browsers where the code wouldn't work (such as if getElementById() isn't supported) have long since been retired whereas back when the answer was written, some such browsers were still in use. And it requires no additional packages beyond what is specified in the question. – cazort Apr 18 '21 at 18:29

Tanerax · Answer 3 · 2008-08-08T14:18:05.390

9

This should return the text value of the selected value

var vSkill = document.getElementById('newSkill');

var vSkillText = vSkill.options[vSkill.selectedIndex].innerHTML;

alert(vSkillText);

Props: @Tanerax for reading the question, knowing what was asked and answering it before others figured it out.

Edit: DownModed, cause I actually read a question fully, and answered it, sad world it is.

edited Aug 08 '08 at 14:18

answered Aug 08 '08 at 13:52

Tanerax

5,826
5
29
27

score 6 · Answer 4 · edited Feb 15 '17 at 11:26

6

document.getElementById('newSkill').options[document.getElementById('newSkill').selectedIndex].value

Should work

edited Feb 15 '17 at 11:26

Amarnath Balasubramanian

9,300
8
34
62

answered Aug 08 '08 at 13:41

Thejesh GN

1,108
2
14
28

4

The OP wants the .text property, rather than .value – ninjaPixel Oct 29 '13 at 16:32

score 4 · Answer 5 · answered Feb 02 '13 at 19:35

4

This works i tried it my self i thought i post it here in case someone need it...

document.getElementById("newSkill").options[document.getElementById('newSkill').selectedIndex].text;

answered Feb 02 '13 at 19:35

Lilith

61
3

score 2 · Answer 6 · edited Apr 28 '16 at 09:25

Attaches a change event to the select that gets the text for each selected option and writes them in the div.

You can use jQuery it very face and successful and easy to use

<select name="sweets" multiple="multiple">
  <option>Chocolate</option>
  <option>Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>


$("select").change(function () {
  var str = "";

  $("select option:selected").each(function() {
    str += $( this ).text() + " ";
  });

  $( "div" ).text( str );
}).change();

score 2 · Answer 7 · answered Oct 25 '17 at 05:40

function getValue(obj)
{  
   // it will return the selected text
   // obj variable will contain the object of check box
   var text = obj.options[obj.selectedIndex].innerHTML ; 

}

HTML Snippet

 <asp:DropDownList ID="ddl" runat="server" CssClass="ComboXXX" 
  onchange="getValue(this)">
</asp:DropDownList>

score 2 · Answer 8 · answered Feb 13 '19 at 23:19

2

Here is an easy and short method

document.getElementById('elementID').selectedOptions[0].innerHTML

answered Feb 13 '19 at 23:19

Manpreet Singh Dhillon

833
11
17

score 1 · Answer 9 · edited Aug 08 '08 at 20:52

1

Does this get the correct answer?

document.getElementById("newSkill").innerHTML

edited Aug 08 '08 at 20:52

Jeff Atwood

63,320
48
150
153

answered Aug 08 '08 at 13:40

Brian Childress

1,140
9
13

5

This will return you the entire HTML code for the options.. like ` ` – Valentin Despa Nov 29 '11 at 11:36

score 1 · Answer 10 · answered Apr 12 '23 at 16:22

1

Get selected text of dropdown using jQuery. I used it in MVC...

$('#dropdownId :selected').text()

answered Apr 12 '23 at 16:22

Fahad Mughal

101
9

score 0 · Answer 11 · answered May 12 '14 at 18:45

    var ele = document.getElementById('newSkill')
    ele.onchange = function(){
            var length = ele.children.length
            for(var i=0; i<length;i++){
                if(ele.children[i].selected){alert(ele.children[i].text)};              
            }
    }

score 0 · Answer 12 · edited Feb 10 '16 at 16:04

0

var selectoption = document.getElementById("dropdown");
var optionText = selectoption.options[selectoption.selectedIndex].text;

edited Feb 10 '16 at 16:04

Alexander Elgin

6,796
4
40
50

answered Feb 01 '16 at 05:00

Debanjan Roy

21
1
8

How about some text to explain whats happening? – Stephan Kristyn Feb 11 '16 at 02:33
While a code only answer solves the problem for the op, it isn't recommended as it provides no value for future visitors, a answer that only provides is quickly going to be flagged as "very low quality" and by the result of that it will be deleted quickly. [edit] your answer to include an explanation what the provided code does. – Ferrybig Feb 11 '16 at 09:25
Thank you. I hope my answer is easily to understand by others. – Debanjan Roy Jul 20 '16 at 13:30
when I tried logging this `var optionText = selectoption.options[selectoption.selectedIndex].text;`, only the first option item gets returned. I want each of them to display from `onchange` event. – Chris22 Aug 09 '17 at 06:57

score 0 · Answer 13 · answered Mar 29 '16 at 05:52

0

Please try the below this is the easiest way and it works perfectly

var newSkill_Text = document.getElementById("newSkill")[document.getElementById("newSkill").selectedIndex];

answered Mar 29 '16 at 05:52

IbrahimSediq

1
1

score 0 · Answer 14 · edited Jun 03 '21 at 11:24

Found this a tricky question but using ideas from here I eventually got the solution using PHP & Mysqli to populate the list : and then a bit of javascript to get the working variable out.

        <select  id="mfrbtn" onchange="changemfr()" >   
        <option selected="selected">Choose one</option>
            <?php
            foreach($rows as $row)
                {
                echo '<option   value=implode($rows)>'.$row["Mfrname"].'</option>';
                 }
              ?>
          </select>

Then :

<script language="JavaScript">
    
    function changemfr()
    {
     var $mfr2=document.getElementById("mfrbtn").selectedOptions[0].text;
     alert($mfr2);
    }
</script>

Getting the text from a drop-down box

14 Answers14

Linked

Related