Getting the text from a drop-down box

78

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>

This question is tagged with javascript dom browser client-side

~ Asked on 2008-08-08 13:36:16

12 Answers


137

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;

~ Answered on 2008-08-08 13:54:55


14

Simply You can use Jquery instead of Javascript

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

Try This.

~ Answered on 2017-05-23 09:26:17


8

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.

~ Answered on 2008-08-08 13:52:02


7

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

Should work

~ Answered on 2008-08-08 13:41:11


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 on 2013-02-02 19:35:55


2

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>

~ Answered on 2017-10-25 05:40:31


2

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();

~ Answered on 2015-10-01 11:55:22


1

Does this get the correct answer?

document.getElementById("newSkill").innerHTML

~ Answered on 2008-08-08 13:40:04


0

    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)};              
            }
    }   

~ Answered on 2014-05-12 18:45:29


0

Here is an easy and short method

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

~ Answered on 2019-02-13 23:19:08


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 on 2016-03-29 05:52:32


0

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

~ Answered on 2016-02-01 05:00:15


Most Viewed Questions: