在<select>框中选择选项的最正确方式

Question

我知道使用jQuery有多种方法来选择一个下拉菜单中的特定选项：

1. $select.val("someValue")
2. $option.attr("selected", "selected")
3. $select[0].selectedIndex = 1

假设您已经知道要选择的选项的索引和值，那么从上述或其他方法中，哪种方法是最正确的呢？

所谓“最正确”，指的是：

1. 最佳实践（如果有）
2. 将正确设置该值，以便在提交表单时它会被提交，并且可以使用上述任意一种方法检索到它
3. 为什么我会选择一种方法而不是其他方法的任何其他原因

- David Tang

Answer 1

某个值 这是在普通情况下的正确用法，如果是非“多选”选择框并且没有两个不同的具有相同的value，那么这种方法是最易读的。 $select[0].selectedIndex = 1

这种写法更为直接，速度稍快，并且对于有多个相同值选项的情况，必须使用这种写法来消除歧义。

如果可能有一个“多选”选择框，则必须单独获取/设置每个选项的选中状态。

$select[0].options[1].selected= true;

然而：

$option.attr("selected", "selected")

通常不是最佳实践。使用 attr() 的问题在于它是一种访问 DOM 属性和 HTML 属性的恶劣 hack，试图将它们视为相同的东西，并尝试向您隐藏差异。在这种情况下，attr() 的作用是设置选定的 DOM 属性，它是一个布尔值。因此，attr('selected', true) 更有意义；'selected' 作为字符串值也可以工作，但这仅仅是因为在 JavaScript 中，所有非空字符串值都是“truthy”的。

如果您实际上在此处设置 HTML 的 selected 属性，则不会影响选项的选择状态，因为 selected 属性实际上映射到 defaultSelected 属性而不是 selected！selected 属性反映用户更改后的运行时表单内容；defaultSelected 反映了文档中包含初始选定状态的实际属性。

（除 IE 外，在其默认值实现中存在错误，其他浏览器在某些复杂且令人困惑的情况下也是如此。带回家的建议：不要尝试从脚本中设置 selected HTML 属性，因为结果可能是不可预测的。使用 DOM 属性进行操作。对于输入框的 value/defaultValue 和复选框/单选框的 checked/defaultChecked，也是如此。）

- bobince

Answer 2

最常用的方法是$select.val("someValue")，这是官方文档中设置任何输入值的方法，因此它将是最优化的方法，也是性能方面最好的选择。

对于#2，是的，它满足要求；对于#3，它很简短，但仍然非常明确地表达了你的意图。

话虽如此，如果你需要设置成千上万个选择元素中的值，则最快的方法是使用$select[0].selectedIndex = 1...你无法比本地DOM属性更快。当只设置一个值时（除非它有很多项，在这种情况下再次使用.selectedIndex），三种方法之间的速度应该相差不大。

- Nick Craver

Answer 3

正如Nick Craver所提到的，任何一种都可以使用，这取决于上下文，哪种最适合您的需求。

就个人而言，如果我需要速度，我只会使用类似以下示例代码（未经测试）：

var elem = document.getElementById('myselectid');
elem.options[1].value = 'some value'

但是，这样做会失去使用 jquery 的好处。

如果您需要基于模式进行多个更改，例如，则可以使用jquery来帮助减少您需要编写的未经测试的代码量。 您可以查看此链接中的漂亮模式列表：http://www.myphpetc.com/2009/03/jquery-select-elements-tips-and-tricks.html。

因此，在任何情况下都没有最佳方法，这就是为什么有很多种方法可以设置元素中的，但是，如果您提供一个用户故事，其中涉及到这样做，那么可以解释具体的最佳实践。

- James Black