Question

背景

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

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

问题

目前我正在使用jQuery :selected CSS选择器，它按预期工作，但这种方法效率不高，因为它需要一段时间才能找到所选的选项 - 显然，它取决于客户机的CPU功率，但是在具有4GB内存的体面的英特尔酷睿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

使用"vanilla" DOM selectedIndex property of the <select>。

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

Answer 3

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

Answer 4

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

$("#sel").val()

在下拉列表中有效获取所选选项（XHTML选择元素）

4 个答案: