在< select>中选择选项的最正确方法盒子 [英] Most correct way to select option in <select> box

问题描述

我知道有多种方法可以使用jQuery选择特定选项:

I know there are multiple ways to select a particular option from a using jQuery:

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

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

假设您同时拥有希望选择的选项的索引及其值，那么(从上面或其他方式)使其成为最正确的选择方式是什么?

Assuming you have both the index of the option you wish to be selected and its value, what's the most correct way (from the above, or otherwise) to make it selected?

最正确"的意思是:

1. 最佳做法(如有)
2. 将正确设置该值，以便它与表单一起提交，并且可以使用上述任何一种方法进行检索
3. 我会选择一种方法而不是其他方法的其他原因

推荐答案

$ select.val("someValue")

$select.val("someValue")

很好，在通常情况下，它是非multiple选择，并且您没有两个具有相同value的不同<option>.如果是这种情况，我会选择它作为最易读的选项.

That's fine, in the common case where it's a non-multiple select and you don't have two different <option>s with the same value. If that's the case I'd go with this, as the most readable option.

$ select [0] .selectedIndex = 1

$select[0].selectedIndex = 1

这是更直接的方法，因此速度稍快一些，对于具有多个具有相同值的选项，必须将其明确.

That's more direct, so marginally quicker, and is necessary to be unambiguous for the case where you have multiple options with the same value.

如果您有multiple -select，则必须分别获取/设置每个选项的选定性:

If you might have a multiple-select, you have to get/set the selectedness of each option separately:

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

但是:

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

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

通常不是最好的方法. attr()的问题在于，访问DOM属性和HTML属性就像是一回事一样，试图向您隐藏差异是一个讨厌的黑客.在这种情况下，attr()要做的是设置selected DOM 属性，它是一个布尔值.所以attr('selected', true)会更有意义； 'selected'作为字符串值也可以，但是仅因为所有非空字符串值在JavaScript中都是真实的".

Not generally the best approach. The problem with attr() is it's a nasty hack to access DOM properties and HTML attributes as if they are the same thing, trying to hide the difference from you. What attr() will do in this case is to set the selected DOM property, which is a boolean value. So attr('selected', true) would make more sense; 'selected' as a string value does also work, but only because all non-empty string values are ‘truthy’ in JavaScript.

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

If you were actually setting the HTML selected attribute here, it would not have an effect on the selectedness of the option, because the selected attribute actually maps to the defaultSelected property and not selected! The selected property reflects the runtime form contents as altered by the user; defaultSelected reflects the actual attribute in the document containing the initial selectedness state.

(在IE上除外，由于其默认值的实现存在错误，在某些情况下，以及在其他浏览器中，它们也过于复杂和令人困惑，难以理解.带回家的建议:请勿尝试设置脚本中的HTML属性，因为结果可能无法预测.使用DOM属性.对于value/defaultValue用于输入，对于checked/defaultChecked用于复选框/无线电也是如此.)

(Except on IE, due to a bug in its implementation of default values, and also in other browsers in some situations which are too intricate and confusing to go into. Take-home advice: don't try setting the selected HTML attribute from script as the results may be unpredictable. Work with the DOM properties. The same is also true of value/defaultValue for inputs and checked/defaultChecked for checkbox/radio.)

这篇关于在< select>中选择选项的最正确方法盒子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！