Самый правильный способ выбора опции в поле <select>

Question

Я знаю, что есть несколько способов выбрать конкретную опцию из jQuery:

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

Предполагая, что у вас есть и индекс опции, которую вы хотите выбрать, и ее значение, каков наиболее правильный способ (из вышеизложенного или иным образом) сделать его выбранным?

Под «наиболее правильным» я подразумеваю:

1. Передовая практика, если таковая имеется
2. Правильно установит значение так, чтобы оно было отправлено вместе с формой, и его можно было получить с помощью любого извышеуказанные методы
3. Любая другая причина, по которой я бы выбрал один метод из других

Answer 1

$ select.val ("someValue")

Это нормально, в общем случае, когда это не-1005 * выбор, а у вас нет двух разных <option> s с тем же value.Если бы это было так, я бы выбрал это как наиболее читаемый вариант.

$ select [0] .selectedIndex = 1

Это более прямо, так незначительнобыстрее, и это необходимо, чтобы быть однозначным для случая, когда у вас есть несколько вариантов с одним и тем же значением.

Если у вас может быть выбор multiple, вы должны получить / установить выбранность каждого параметра отдельно:

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

Однако:

$ option.attr ("выбранный", "выбранный")

Как правило, не лучший подход.Проблема с attr() в том, что получить доступ к свойствам DOM и атрибутам HTML, как если бы они были одним и тем же, пытаться скрыть от вас разницу - это неприятный хак.В этом случае attr() будет устанавливать свойство selected DOM , которое является логическим значением.Так что attr('selected', true) будет иметь больше смысла;'selected' как строковое значение также работает, но только потому, что все непустые строковые значения в JavaScript являются «правдивыми».

Если бы вы на самом деле устанавливали здесь атрибут HTML selected, он бы не имелвлияет на выбранность параметра, поскольку атрибут selected фактически соответствует свойству defaultSelected, а не selected!Свойство selected отражает содержимое формы времени выполнения, измененное пользователем;defaultSelected отражает фактический атрибут в документе, содержащем начальное состояние выбранности.

(За исключением IE, из-за ошибки в его реализации значений по умолчанию, а также в других браузерах в некоторых ситуациях, которые являются слишком сложнымии вводит в заблуждение. Совет на дому: не пытайтесь установить атрибут selected HTML из скрипта, так как результаты могут быть непредсказуемыми. Работа со свойствами DOM. То же самое верно и для value / defaultValueдля входов и checked / defaultChecked для флажков / радио.)

Answer 2

Наиболее часто используемым способом является $select.val("someValue"), это официальный метод в документации для установки значения любого ввода, поэтому он будет наиболее оптимизированным, так как он затрагивает области производительности.

Для # 2, да, это удовлетворяет, для # 3 ... это коротко и все еще делает ваше намерение очень явным.

Как говорится, самый быстрый способ , если вы устанавливаете тысячи элементов select, это маршрут $select[0].selectedIndex = 1 ... вы не можете получить скорость быстрее, чем собственные свойства DOM. Хотя при установке значения 1 (если только у него нет большого количества элементов, в этом случае снова идите с .selectedIndex), скорость должна быть настолько большой, что не имеет значения между любым из трех.

Answer 3

Как отметил Ник Крэйвер, любой из них будет работать, это действительно зависит от контекста, который подойдет для ваших нужд.

Лично, если мне нужна скорость, я просто использую что-то вроде (не проверено, просто пример):

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.

Итак, не существует ни одного наилучшего подхода, который лучше всего подходит в любой ситуации, поэтому существует так много способов установить option в элементе select, но, если вы дадите пользователю историю, в которой вы находитесь После этого можно объяснить конкретную лучшую практику.