从下拉框中获取文本

IT技术 javascript dom browser client-side
2021-03-11 18:56:59

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

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>
6个回答

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

var skillsSelect = document.getElementById("newSkill");
var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
对于那些迟到聚会的人,有几个建议,但没有人注意到他们在应该说 .text 的地方说了 .value,这对我们来说是一个令人困惑的一天。
2021-05-10 18:56:59

只需您可以使用 jQuery 而不是 JavaScript

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

试试这个。

@JCIsola 我不在乎帕特里克的回答有多老,我在乎它在没有额外软件包的情况下是否有效。它适用于所有现代浏览器,如果有的话现在更好,因为代码不起作用的旧浏览器(例如如果不支持 getElementById() )早已退休,而回到编写答案时,一些这样的浏览器仍在使用。除了问题中指定的内容外,它不需要额外的包。
2021-04-21 18:56:59
@cazort Patrick 回答是 13 岁的男人
2021-04-26 18:56:59
最初的问题没有提到 JQuery。我们这些不使用 JQuery 的人通常更喜欢不引用它的答案,除非问题引用或标记它。当存在像 Patrick McElhaney 给出的相对简洁的解决方案时,情况尤其如此。
2021-05-14 18:56:59
@cazort 相反。我需要知道如何用 JQuery 做到这一点,这个答案为我提供了我需要知道的东西,因此 Bobin Joseph 将它作为答案包含在内非常有用(而且很好)。
2021-05-17 18:56:59

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

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

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

alert(vSkillText);

props:@Tanerax 阅读问题,知道问了什么并在其他人弄清楚之前回答。

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

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

应该管用

OP 需要 .text 属性,而不是 .value
2021-05-17 18:56:59

这是有效的,我自己试过了,我想我把它贴在这里以防万一有人需要它......

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