jQuery Set Selected Option Using Next

Question

How can I, using jQuery, set the "next" item of an already selected item as "selected."

For example, if I have:

<select>
<option value="1" >Number 1</option>
<option value="2" selected="selected">Number 2</option>
<option value="3" >Number 3</option>
<option value="4" >Number 4</option>
</select>

We can see that "Number 2" is selected, and using jQuery, I'd like to set "Number 3" as selected, and remove the selected "attribute" from "Number 2". I'm assuming I need to use the next selector, but I'm not quite sure how to implement.

Answer 1

Find the row, then

var row = $('#yourTable');

the value you want to select

var theValue = "5";
row.find("select:eq(2)").find("option[value="+theValue+']').attr('selected','selected');

Answer 2

  $("select").prop("selectedIndex",$("select").prop("selectedIndex")+1)

Answer 3

From version 1.6.1 on, it's advisable to use the method prop for boolean attributes/properties such as selected, readonly, enabled,...

var theValue = "whatever";
$("#selectID").val( theValue ).prop('selected',true);

For more info, please refer to to http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Answer 4

$('#next').click( function(){
    $('#colored_background option:selected').next('option').attr('selected', 'selected');
    changeBackgroundColor();
});

Working at What is my favorite color?. Click on the arrows.

Answer 5

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

Check out working code here http://jsbin.com/ipewe/edit