有效地获取下拉列表中的选定选项（XHTML Select 元素）

Question

背景

使用 XHTML Select 元素的下拉列表中有大量选项（数十个）。

我需要使用 JavaScript 检索所选选项。

问题

目前我正在使用 jQuery :selected CSS 选择器，它按预期工作，但这种方法效率不高，因为它需要一段时间才能找到选定的选项 - 显然，这取决于客户端机器的 CPU 能力，但在具有 4GB RAM 的不错的 Intel Core 2 中，性能损失过大。

问题

无论是使用 jQuery 还是纯 JavaScript 和 DOM，我都需要以有效的方式获取此 XHTML Select 元素的选定选项。

先感谢您。

Answer 1

应该很简单：

// assuming `select` refers to the select DOM element
var selectedElement = select.options[select.selectedIndex];

请参阅 HTMLSelectElement ^[MDN]。

更新：

在支持以下方法的较新浏览器中（它们是HTML5的一部分），您还可以使用：

var selectedElement = select.item(select.selectedIndex);
// or
var selectedElement = select[select.selectedIndex];
// or
var selectedElement = select.selectedOptions[0];

Answer 2

var dropDown = document.getElementById("yourId");
dropDown.options[dropDown.selectedIndex];

Answer 3

使用 < 的 "vanilla" DOM selectedIndex 属性;选择>。

var $select = $('#mySelect'),
    si = $select.get(0).selectedIndex,
    $selectedOpt = $select.children('option:eq(' + si + ')');

Answer 4

<select id="sel">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

$("#sel").val()