从下拉框中获取文本

Posted 2023-02-21

【中文标题】从下拉框中获取文本

【英文标题】：Getting the text from a drop-down box

【发布时间】：2010-09-05 13:49:24

【问题描述】：

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

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>

【参考方案1】：

你可以使用 jQuery 代替 javascript

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

试试这个。

【讨论】：

原问题没有提到JQuery。我们这些不使用 JQuery 的人通常更喜欢答案而不是引用它，除非问题引用或标记它。当有像 Patrick McElhaney 给出的相对简洁的解决方案时尤其如此。

@cazort 相反。我需要知道如何使用 JQuery 来做到这一点，这个答案为我提供了我需要知道的内容，因此 Bobin Joseph 将它作为答案包含在内是非常有用（而且很好）的。

@cazort Patrick 回答是 13 岁的男人

@JCIsola 我不在乎帕特里克的答案有多老，我在乎它是否在没有额外软件包的情况下工作。它适用于所有现代浏览器，如果有的话，现在更好了，因为代码不起作用的旧浏览器（例如不支持 getElementById() ）早已退役，而在编写答案时，一些这样的浏览器仍在使用中。除了问题中指定的内容之外，它不需要额外的包。

【参考方案2】：

发现这是一个棘手的问题，但使用这里的想法，我最终得到了使用 php 和 mysqli 填充列表的解决方案：然后使用一些 javascript 来获取工作变量。

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

然后：

<script language="JavaScript">
    
    function changemfr()
    
     var $mfr2=document.getElementById("mfrbtn").selectedOptions[0].text;
     alert($mfr2);
    
</script>

【参考方案3】：

这是一个简单而简短的方法

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

【参考方案4】：

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>

【参考方案5】：

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

应该有效

【讨论】：

OP 想要 .text 属性，而不是 .value

【参考方案6】：

将更改事件附加到获取每个选定选项的文本并将它们写入 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();

【参考方案7】：

请尝试以下方法，这是最简单的方法，效果很好

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

【参考方案8】：

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

【讨论】：

来点文字解释一下发生了什么？

虽然只有代码的答案可以解决操作的问题，但不建议这样做，因为它对未来的访问者没有任何价值，仅提供的答案很快就会被标记为“质量非常低” "因此它会很快被删除。 edit 你的答案包括对所提供代码的作用的解释。

谢谢。我希望我的回答很容易被别人理解。

当我尝试记录此var optionText = selectoption.options[selectoption.selectedIndex].text; 时，仅返回第一个选项项。我希望他们每个人都从 onchange 事件中显示。

【参考方案9】：

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

【参考方案10】：

这个作品我自己试过了，我想我把它贴在这里以防有人需要它......

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

【参考方案11】：

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

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

【讨论】：

对于那些迟到的人，有几个建议，但没有人注意到他们在应该说 .text 的地方说 .value，这对我们所有人来说都是令人困惑的一天。

【参考方案12】：

这是否得到正确答案？

document.getElementById("newSkill").innerHTML

【讨论】：

这将为您返回选项的完整 HTML 代码.. 比如` A Skill Another Skill 又一技能 `

【参考方案13】：

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

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

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

alert(vSkillText);

道具：@Tanerax 用于阅读问题，知道被问到什么并在其他人弄明白之前回答它。

编辑：DownModed，因为我实际上完整地阅读了一个问题，并回答了它，这是一个悲伤的世界。