从下拉框获取文本

这将获取我的下拉菜单中所选内容的值。

document.getElementById('newSkill').value

然而,我不能找到什么属性后面的文本,目前显示的下拉菜单。我试了“短信”,然后看了看 W3学校,但是没有答案,这里有人知道吗?

对于那些不确定的人,这里有一个下拉框的 HTML。

<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>
245888 次浏览

Does this get the correct answer?

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

Should work

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.

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;

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

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();
var selectoption = document.getElementById("dropdown");
var optionText = selectoption.options[selectoption.selectedIndex].text;

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

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

Simply You can use jQuery instead of JavaScript

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

Try This.

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

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>