Select first item of a select

Question

How do I always select the first item in a HTML select box using index? I do not want to use val() to select.

Answer 1

$('select option:first').get(0).select();

or:

$('select option:first').attr('selected','selected');

Assuming that by select you mean make the first option the selected one.

See Selectors/first

Answer 2

You can use the :first selector:

var firstOption = $('#selectId option:first');

Then you can get the option value by firstOption.val(); or the option text by firstOption.text();

And set it as selected:

firstOption.attr('selected', true);

Edit: If the only thing you want is to set the selected option, use the selectedIndex attribute:

$('#selectId').attr('selectedIndex', 0);

Answer 3

$("select option:first").attr('selected','selected');

Answer 4

attr('selected','selected');

Is misunderstanding what jQuery is doing a little. attr sets a DOM property, not an HTML attribute value; actually setting the selected HTML attribute would not necessarily change the selectedness of the option, because the attribute only controls the default state of the field. (except in IE due to a bug.)

attr('selected', true) would be more appropriate. However since any non-empty string evaluates to true in a boolean context, the above will still work.

Anyway... sometimes it's best to use normal DOM properties rather than forcing everything into the set of operations provided by jQuery. jQuery is supposed to be an addition to JS and DOM, not a complete replacement for it. Your suggestion in comments:

$('#select1').get(0).selectedIndex= 0;

is a more natural way to select the first option IMO, and much much faster than asking jQuery to parse and implement a selector.