如何获取选择控件中选定项目的文本？

<select name="DropList" id="serverDropList"> 
    <option selected="selected" value="2">server1:3000</option> 
    <option value="5">server3:3000</option> 
</select>

我知道原型我可以通过$('serverDropList').value得到价值，但我怎么能得到“server1：3000”？如何获取选择控件中选定项目的文本？

来源

2010-04-26 icn

我不认为原型，做的是你，所以任何捷径：

var box = $('serverDropList'); 
var text = box.selectedIndex >= 0 ? box.options[box.selectedIndex].innerHTML : undefined;

...给你所选择的选项的innerHTML，或undefined如果是没有的。

如果你喜欢，你可以使用Element#addMethods一次定义这一点，有它可在所有的选择框：

Element.addMethods("SELECT", (function() { 
    function getSelectedOptionHTML(element) { 
     if (!(element = $(element))) return; 
     var index = element.selectedIndex; 
     return index >= 0 ? element.options[index].innerHTML : undefined; 
    } 

    return { 
     getSelectedOptionHTML: getSelectedOptionHTML 
    }; 
})());

用法：

var text = $('serverDropList').getSelectedOptionHTML();

定义，当我用命名函数那。如果你不打扰关于命名函数（我，我always use them），你可以把它简单一点：

Element.addMethods("SELECT", { 
    getSelectedOptionHTML: function(element) { 
     if (!(element = $(element))) return; 
     var index = element.selectedIndex; 
     return index >= 0 ? element.options[index].innerHTML : undefined; 
    } 
);

来源

2010-04-27 00:21:13

如果您使用的原型，你可以使用：

var text = $('serverDropList')[$('serverDropList').selectedIndex].text;

来源

2011-09-12 14:02:09 multikulinaria

谢谢:)工作正常:) – Elangovan 2016-03-11 14:39:58

这应该是正确的答案。完美 – Apeiron 2017-12-28 16:05:36

function getSelectedValue(obj) { 
    return obj.options[obj.selectedIndex].value; 
}

用法：

<select onchange="alert(getSelectedValue(this););" id="mySelect"> 
<option value="1">one</option> 
<option value="2">two</option> 
</select>

或

getSelectedValue(document.getElementById('mySelect'));

或（使用原型或jQuery的时候）

getSelectedValue($('mySelect'));

来源

2012-04-24 09:10:06 manuxi

这不会返回文本值，而是返回所选项目的'value'属性。 OP在询问所选选项的文本值。 – cjc343 2012-10-27 00:46:03

我很抱歉，如果我用这个答案来晚了，但我一直在寻找到同样的问题，我并不满意这个答案，所以我挖了一个更好的答案：

原型有以下选择器，您可以使用为了获取列表中选定的值：$ F。所以在你例子的情况下，它应该工作在下面的代码：

$F('serverDropList'); -- this for getting the value 
$F('serverDropList').text; -- this for getting the text

来源

2012-06-18 09:02:19 decebal

这是好得多..是否有一种方法与onchange创建的'this'一起捣碎？ – Damon 2012-08-13 14:22:12

nm ..我试图使用这个.. undefined越来越undefined – Damon 2012-08-13 14:32:10

我不是很确定这个功能是否支持所有的浏览器，所以你可以检查，否则你可能犯了一个错误，提交小提琴所以我可以帮助你的事业 – decebal 2012-08-21 12:35:04

选择第二个选择：

<select onchange="alert(getSelectedValue(this););" id="mySelect"> 
    <option> value="1" city="chicago"> one </option> 
    <option> value="2" city="orlando"> two </option> 
</select>

我需要选择的项目价值的城市。

来源

2013-12-31 21:39:52 user1499449

如何获取选择控件中选定项目的文本？

回答

相关问题