Getting the text from a drop-down box

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" 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>

14 Answers

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;

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.

Simply You can use jQuery instead of JavaScript

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

Try This.

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 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.

cazort Patrick answer is 13 years old man

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.

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.

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

Should work

The OP wants the .text property, rather than .value

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;

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

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>

Here is an easy and short method

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

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

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

Does this get the correct answer?

document.getElementById("newSkill").innerHTML

This will return you the entire HTML code for the options.. like ` <option value="1">A skill</option> <option value="2">Another skill</option> <option value="3">Yet another skill</option> `

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

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

How about some text to explain whats happening?

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.

Thank you. I hope my answer is easily to understand by others.

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.

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

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

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>

How to specify javascript to run when ModalPopupExtender is shown

Execute Javascript when ModalPopupExtender is displayed

The ASP _ NET AJAX ModalPopupExtender has OnCancelScript and OnOkScript properties, but it doesn't seem to have an OnShowScript property. I'd like to specify a javascript function to run each time the popup is shown. In past situations, I set the TargetControlID to a dummy control and provide my own control that first does some JS code and then uses the JS methods to show the popup. But in this case, I am showing the popup from both client and server side code. Anyone know of a way to do this? BTW, I needed this because I have a textbox in the modal that I want to make a TinyMCE editor. But the TinyMCE init script doesn't work on invisible textboxes, so I had to find a way to run it at the time the modal was shown. They show you how to RAISE an event manually, not not how to attach to it: asp _ net _ ajaxlibrary _ act_modalpopup.ashx ...priceless hmmm... I'm pretty sure that there…