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 to have a next and previous button on the left and right sides of the select list.

I cant really figure out, i tried attr but only working if I manually type the attributes.

<button type="button" id="prev">Previous</button>
<select id="mycars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
</select>
<button type="button" id="next">Next</button>

Thanks in advance.

Answer 1

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

Answer 2

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.