Getting the text from a drop-down box
JavascriptDomBrowserClient SideJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
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;
Solution 2 - Javascript
Simply You can use jQuery instead of JavaScript
$("#yourdropdownid option:selected").text();
Try This.
Solution 3 - Javascript
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.
Solution 4 - Javascript
document.getElementById('newSkill').options[document.getElementById('newSkill').selectedIndex].value
Should work
Solution 5 - Javascript
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;
Solution 6 - Javascript
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();
Solution 7 - Javascript
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>
Solution 8 - Javascript
Does this get the correct answer?
document.getElementById("newSkill").innerHTML
Solution 9 - Javascript
Here is an easy and short method
document.getElementById('elementID').selectedOptions[0].innerHTML
Solution 10 - Javascript
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)};
}
}
Solution 11 - Javascript
var selectoption = document.getElementById("dropdown");
var optionText = selectoption.options[selectoption.selectedIndex].text;
Solution 12 - Javascript
Please try the below this is the easiest way and it works perfectly
var newSkill_Text = document.getElementById("newSkill")[document.getElementById("newSkill").selectedIndex];
Solution 13 - Javascript
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>