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.

There is another thread with a lot of information on getting selected options that was useful (it actually sent me here). The tread is here: http://stackoverflow.com/questions/1280499/jquery-set-select-index — Wes Grant, Jun 10 '11 at 03:02

score 115 · Answer 1 · edited Jul 31 '13 at 08:02

115

Update:

As of jQuery 1.6+ you should use prop() instead of attr() in this case.

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

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

Original Answer:

If you want to select by the value of the option, REGARDLESS of its position (this example assumes you have an ID for your select):

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

You do not need to "unselect". That happens automatically when you select another.

edited Jul 31 '13 at 08:02

djf

6,592
6
44
62

answered May 25 '10 at 08:16

GtotheB

2,727
4
21
17

Your answer is a more rounded answer. Which almost a year later has helped. Thanks. – Kris.Mitchell Aug 09 '10 at 18:09
4

A year later yes, but I just ran into this code. You made one small mistake with your assumption that the item is automatically unselected when you select another. That is not the case when the option list is multi select. I just wanted to point that out in case someone expected that behavior and was frustrated with it not working as advertised. – SRM May 25 '11 at 22:51
@SRM - Good point. I, personally, never work w/multi-selects...so it never crossed my mind. Thanks for adding the clarification. – GtotheB Jun 03 '11 at 19:30
6

Wouldn't .attr('selected',true) add selected attribute to select element instead of option. – understack Jun 28 '11 at 07:17
18

@understack. Yes. Yes, it would. We struggled with this very issue this morning. Good catch. +1 We ended up using: `$("selectID").find("option[value='"+theValue+"']").attr("selected", "selected")` and this worked fine – jaydel Oct 13 '11 at 14:54
@jaydel - that didn't work for me unfortunately. Well, it works in firefox (desktop) but in Safari on iPhone4 it fails to work. I've tried several variations but all fail to work. $("#sig-mode").find("option[value='YES']").attr("selected", "selected"); – Mark Dec 22 '11 at 10:00
1

@jaydel - ok, figured it out by looking at some other forums. It seems that for iPhone4 Safari I must add after the find(blah blah).attr(yada yada) this: $('#sig-mode').change(); – Mark Dec 22 '11 at 10:38

DLS · Accepted Answer · 2009-08-14T21:48:42.723

60

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

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

edited Aug 14 '09 at 21:48

answered Aug 14 '09 at 21:46

DLS

5,313
8
37
50

Is removing the attribute from the currently selected one required? I could be wrong but I think not? The `.attr` call should be replaced by .prop for any recent version of jquery as far as I know, right? – codeling Feb 16 '17 at 01:04

score 17 · Answer 3 · answered Oct 29 '12 at 07:58

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/

Kobi · Answer 4 · 2009-08-14T21:54:28.827

6

you can use

$('option:selected').next('option')

or

$('option:selected + option')

And set the value:

var nextVal = $('option:selected + option').val();
$('select').val(nextVal);

edited Aug 14 '09 at 21:54

answered Aug 14 '09 at 21:47

Kobi

135,331
41
252
292

Racky · Answer 5 · 2011-01-21T14:19:55.933

3

And if you want to specify select's ID:

$("#nextPageLink").click(function(){
  $('#myselect option:selected').next('option').attr('selected', 'selected');
  $("#myselect").change();
});

If you click on item with id "nextPageLink", next option will be selected and onChange() event will be called. It may look like this:

$("#myselect").change(function(){
  $('#myDivId').load(window.location.pathname,{myvalue:$("select#myselect").val()});
});

OnChange() event uses Ajax to load something into specified div.

window.location.pathname = actual address

OnChange() event is defined because it allowes you to change value not only using netx/prev button, but directly using standard selection. If value is changed, page does somethig automatically.

edited Jan 21 '11 at 14:19

answered Jan 21 '11 at 14:10

Racky

1,173
18
24

+1 for stating that ".change()" needs to be called manually. Not knowing it can cause nightmares. – everton Mar 12 '12 at 12:34
The change was my problem, the value was selected but not showing in the dropdown. – avgbody Oct 24 '14 at 14:22

score 1 · Answer 6 · answered Dec 12 '13 at 10:31

1

This is what i just used, i like how clean it is :-)

$('select').val(function(){
    var nextOption = $(this).children(':selected').next();
    return $(nextOption).val();
}).change();

answered Dec 12 '13 at 10:31

Andy

2,892
2
26
33

score 1 · Answer 7 · answered Feb 25 '14 at 13:37

1

$('your_select option:selected').next('option').prop('selected', true)

answered Feb 25 '14 at 13:37

Memonic

345
5
14

score 0 · Answer 8 · edited Oct 21 '12 at 17:25

0

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

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

edited Oct 21 '12 at 17:25

Doug Porter

7,721
4
40
55

answered Jun 09 '12 at 12:36

David Lefkon

289
4
6

Cool site! Why not map the image and make the different pieces selectable that way? – DevlshOne Jul 01 '13 at 15:16

score 0 · Answer 9 · answered Dec 18 '13 at 14:32

0

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

answered Dec 18 '13 at 14:32

zloctb

10,592
8
70
89

score 0 · Answer 10 · answered Sep 07 '15 at 05:01

0

$('#my_sel').val($('#my_sel option:selected').next().val());
$('#my_sel').val($('#my_sel option:selected').prev().val());

answered Sep 07 '15 at 05:01

Krishna Murthy

141
1
5

score 0 · Answer 11 · edited Sep 05 '13 at 21:08

0

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');

edited Sep 05 '13 at 21:08

NewUser

3,729
10
57
79

answered Apr 05 '11 at 20:03

Vins

1,931
16
14

jQuery Set Selected Option Using Next

11 Answers11

Linked