Select the second value of selecbox

Question

Is it possible to make the second option selected with jquery, css or whatever? I thought about using css nth-child, but don't know how to do it in practice. Any suggestions? :)

Answer 1

You may try this (using jQuery)

$(function(){
    $('select option:eq(1)').prop('selected', 1);
});

DEMO.

Answer 2

$('#select-id option:nth-child(2)').prop('selected', true);

Answer 3

I am assuming that by default first option is selected.

Using Jquery:

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

Answer 4

<option>1</option>
<option selected>2</option>

Answer 5

Are you trying to set the second option as 'selected'?

<select name='s'>
    <option value='1'>1</option>
    <option value='2' selected='selected'>2</option>
</select>

Answer 6

Hmm. So far the suggested didn't worked for me. Here's the full layout that i'm working with:

jQuery('.priceselector  option:nth-child(2)').prop('selected', true);

<select name="super_attribute[145]" id="attribute145" style="padding:6px;"
class="priceselector required-entry super-attribute-select">

<option value="">Choose an Option...</option>
<option value="14" price="1500">20" (w) x 24" (h) Framed  +$1500.00</option> --This needs to bee selected by default
<option value="15" price="1200">20" (w) x 24" (h) Unframed  +$1200.00</option>
<option value="18" price="2500">30" (w) x 40" (h) Framed +$2500.00</option>
<option value="17" price="2000">30" (w) x 40" (h) Unframed +$2000.00</option>
<option value="16" price="300">8" (w) x 10" (h) Unframed +$300.00</option>
</select>

Answer 7

Change the value of the select box to a value defined by one of the options (and trigger the change event if desired):

<select>
   <option>foo</option>
   <option selected="selected">bar</option>
</select>

$("select").val("foo").change();

or select the option value by hand via either the value or the order:

// deselect the previously selected value first
$("select option").prop("selected",false);

$("select option").eq(2).prop("selected",true);
$("select option[value=foo]").prop("selected",true);