Choose option from select list using next/previous button with jquery

Question

What is best way to navigate select option using next/previous button with jquery? I have a select list when change also changes some div. Instead of just a dropdown, I want

Answer 1

Something like this should work -

$("#next").click(function() {
    $("#mycars").val($("#mycars > option:selected").next().val());
})

$("#prev").click(function() {
    $("#mycars").val($("#mycars > option:selected").prev().val());
})

Interestingly this will "wrap-around" (go back to the 'Volvo' option after 'Audi') when using the next button but stop at the 'Volvo' option when using the 'Previous' button. Here's a demo -

http://jsfiddle.net/aQSSG/

Answer 2

to set the selected value of a list you should try something like this:

$("#mycars").val("saab");

Answer 3

Here's a nice short version that does not wrap around at either end:

$("#next, #prev").click(function() {
    $("#mycars :selected")[this.id]().prop("selected", true);
});

Note that it depends on the id of the buttons being next and prev, which they are in your example.

Here's a working example.

Using prop instead of attr means we actually change the property, rather than the value of the attribute. That means there's no need to use removeAttr as in the other answers, which means we don't get stuck on the first or last option.

Answer 4

Description

You can use jQuery's .removeAttr(), attr(), .next() and .prev() methods for that.

Check out my sample and this jsFiddle Demonstration

Sample

$("#next").click(function() {
  var nextElement = $('#mycars > option:selected').next('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  }
});

$("#prev").click(function() {
  var nextElement = $('#mycars > option:selected').prev('option');
  if (nextElement.length > 0) {
    $('#mycars > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  }
});

More Information

• jQuery.removeAttr()
• jQuery.attr()
• jQuery.next()
• jQuery.prev()

Update

I don't know if you want to disable the, for example, next button if the last element is selected, select the first one or do nothing. Please provide this information.

You can do this to go to this to go to the first element if the last is selected, or to the last if first is selected.

$("#next").click(function() {
    var isLastElementSelected = $('#mycars > option:selected').index() == $('#mycars > option').length -1;

    if (!isLastElementSelected) {     
        $('#mycars > option:selected').removeAttr('selected').next('option').attr('selected', 'selected'); 
    } else {
           $('#mycars > option:selected').removeAttr('selected');
           $('#mycars > option').first().attr('selected', 'selected'); 
     }   
});

$("#prev").click(function() {
    var isFirstElementSelected = $('#mycars > option:selected').index() == 0;

    if (!isFirstElementSelected) {
       $('#mycars > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
    } else {
         $('#mycars > option:selected').removeAttr('selected');
         $('#mycars > option').last().attr('selected', 'selected'); 
    }

});

Updated jsFiddle