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

Question

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

我知道在原型中我可以获得价值,$('serverDropList').value但我怎么能得到"server1:3000"？

Answer 1

如果您使用的是Prototype,您可以使用:

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

Answer 2

我不认为Prototype有任何捷径可以帮助你,所以:

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

我在定义时使用了一个命名函数.如果你不关心命名函数(我,我总是使用它们),你可以使它更简单:

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

Answer 3

我很抱歉,如果我迟到这个答案,但我正在调查同样的问题,我对这个答案不满意,所以我挖了一个更好的答案:

Prototype具有以下选择器,您可以使用它来获取列表的选定值:$ F. 所以在你的示例情况下,它应该工作以下代码:

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