从下拉框中获取文本


76

这将获得在我的下拉菜单中选择的任何值。

document.getElementById('newSkill').value

但是,我无法找到下拉菜单当前显示的文本的属性。我尝试了“文本”,然后看了看W3Schools,但是那没有答案,这里有人知道吗?

对于那些不确定的人,这里是下拉框的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>

Answers:


137

根据您的示例HTML代码,这是一种获取当前所选选项的显示文本的方法:

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

3
对于那些晚到聚会的人,有一些建议,但没人注意到他们说.value应该在哪里说.text,这对我们来说真是令人困惑的一天。
Teifion

13

只需使用Jquery而不是Javascript

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

尝试这个。


原始问题没有提到JQuery。我们中那些不使用JQuery的人通常希望答案不引用它,除非问题引用或标记了它。当存在像Patrick McElhaney给出的相对简洁的解决方案时,尤其如此。
cazort

1
@cazort相反。我需要知道如何使用JQuery做到这一点,而这个答案为我提供了我所需要知道的知识,因此Bobin Joseph将其作为答案非常有用(而且很好)。
破碎的人

8

这应该返回所选值的文本值

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

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

alert(vSkillText);

道具:@Tanerax,用于阅读问题,知道所提出的问题并在其他人弄清楚之前就回答它。

编辑:DownModed,因为我实际上已经完全阅读了一个问题,并回答了这个问题,这真是令人难过。


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

应该管用


2
OP希望使用.text属性,而不是.value
ninjaPixel 2013年

4

这项工作我自己尝试过,我以为我将其发布在这里,以防有人需要它...

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

2

将更改事件附加到select上,该事件获取每个所选选项的文本并将其写入div中。

您可以非常有效地使用jQuery,而且成功易用

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

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片段

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

1

这会得到正确的答案吗?

document.getElementById("newSkill").innerHTML

5
这将为您返回选项的完整HTML代码。例如`<选项值=“ 1”>一项技能</ option> <选项值=“ 2”>另一项技能</ option> <选项值=“ 3” >另一项技能</ option>`
Valentin Despa

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

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

如何解释发生的事情呢?
史蒂夫·K

尽管仅代码答案可以解决操作问题,但不建议这样做,因为它对未来的访问者没有任何价值,而仅提供答案的答案很快就会被标记为“质量很差”,其结果是将被迅速删除。编辑您的答案以包括提供的代码的解释。
Ferrybig '16

谢谢。我希望我的答案很容易被他人理解。
Debanjan Roy

当我尝试记录此内容时var optionText = selectoption.options[selectoption.selectedIndex].text;,仅返回第一个选项项。我希望每个人都从onchange事件中显示。
克里斯22年

0

请尝试以下操作,这是最简单的方法,并且效果很好

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.