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

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.