Javascript 如何在选择控件中获取所选项目的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2717795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the text of a selected item in a select control?
提问by icn
<select name="DropList" id="serverDropList">
<option selected="selected" value="2">server1:3000</option>
<option value="5">server3:3000</option>
</select>
i know in prototype i can get value by $('serverDropList').valuebut how can i get "server1:3000" ?
我知道在原型中我可以获得价值，$('serverDropList').value但我怎样才能获得“server1:3000”？
回答by multikulinaria
If you are using Prototype, you may use:
如果您使用 Prototype，您可以使用：
var text = $('serverDropList')[$('serverDropList').selectedIndex].text;
回答by T.J. Crowder
I don't think Prototype has any shortcut that does that for you, so:
我不认为 Prototype 有任何捷径可以为您做到这一点，因此：
var box = $('serverDropList');
var text = box.selectedIndex >= 0 ? box.options[box.selectedIndex].innerHTML : undefined;
...gives you the innerHTMLof the selected option, or undefinedif there is none.
...为您提供innerHTML所选选项的 ，或者undefined如果没有。
If you like, you can use Element#addMethodsto define this once and have it available on all of your select boxes:
如果您愿意，您可以使用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
};
})());
Usage:
用法：
var text = $('serverDropList').getSelectedOptionHTML();
I used a named function when defining that. If you're not bothered about named functions (I am, I always use them), you can make it a bit simpler:
我在定义时使用了一个命名函数。如果你不介意命名函数（我是，我总是使用它们），你可以让它更简单一点：
Element.addMethods("SELECT", {
getSelectedOptionHTML: function(element) {
if (!(element = $(element))) return;
var index = element.selectedIndex;
return index >= 0 ? element.options[index].innerHTML : undefined;
}
);
回答by Decebal
I'm sorry if i am late with this answer, but i was looking into the same problem and i wasn't satisfied with this answer, so i dug for a better answer:
如果我迟到了这个答案，我很抱歉，但我正在研究同样的问题并且我对这个答案不满意，所以我挖掘了一个更好的答案：
Prototype has the following selector that you can use in order cu get the selected value of your list: $F. So in you example situation, it should work the following code:
Prototype 具有以下选择器，您可以使用它来使 cu 获得列表的选定值：$F。因此，在您的示例情况下，它应该使用以下代码：
$F('serverDropList'); -- this for getting the value
$F('serverDropList').text; -- this for getting the text
回答by manuxi
function getSelectedValue( obj ) {
return obj.options[obj.selectedIndex].value;
}
Usage:
用法：
<select onchange="alert(getSelectedValue(this););" id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
or
或者
getSelectedValue(document.getElementById('mySelect'));
or (when using prototype or jquery)
或（使用原型或 jquery 时）
getSelectedValue($('mySelect'));
回答by user1499449
Select the second choice:
选择第二个选项：
<select onchange="alert(getSelectedValue(this););" id="mySelect">
<option> value="1" city="chicago"> one </option>
<option> value="2" city="orlando"> two </option>
</select>
I need to pick the item value city.
我需要选择物品价值城市。
