CODEWITHSUNDEEP
jquery
genpet
genpet

Reputation: 453

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

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.

Upvotes: 5

Views: 16002

Answers (4)

James Allardice
James Allardice

Reputation: 165971

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.

Upvotes: 12

dknaack
dknaack

Reputation: 60486

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

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

Upvotes: 16

ipr101
ipr101

Reputation: 24236

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/

Upvotes: 0

Marius Ilie
Marius Ilie

Reputation: 3323

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

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

Upvotes: 0

Related Questions