Question

This should be really simple with jQuery but I cant get it to work! Cant seem to find anything on searches either …

I have a select list, and I want to use + and – buttons next to it (like quantity boxes) to cycle through the list values, so the user does not need to click the dropdown, scroll and select.

Effectively I need a select list, with ‘next’ and ‘previous’ buttons that simply fire jQuery on click and cycle up and down the values.

A bit sample script would be wonderful.

Answer 1

Given the following <html/>

<select>
    <option></option>
    <option value="1">Opion 1</option>
    <option value="2">Opion 2</option>
    <option value="3">Opion 3</option>
    <option value="4">Opion 4</option>
    <option value="5">Opion 5</option>
    <option value="6">Opion 6</option>
</select>
<input type="button" value=" - " id="down"/>
<input type="button" value=" + " id="up"/>

And the script:

$("#up").click(function(){
    $("select option:selected").next().prop("selected", true);
});
$("#down").click(function(){
    $("select option:selected").prev().prop("selected", true);
});

Note, this relies on jQuery 1.6 and .prop(), if using less than 1.6 use .attr()

Example on jsfiddle