using jquery :selected selector with next / previous arrows
using jquery :selected selector with next / previous arrows
HTML
<select id="mycars">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
<a id="prev">prev</a> <a id="next">next</a>
JavaScript
$(document).ready(function () {
$('#next').live('click', function () {
var objMyCars = $('#mycars');
if (objMyCars.find('option:last').prop('selected') === true) {
objMyCars.find('option:first').attr('selected', true);
} else {
objMyCars.find('option:selected').next().attr('selected', true);
}
});
$('#prev').live('click', function () {
var objMyCars = $('#mycars');
if (objMyCars.find('option:first').prop('selected') === true) {
objMyCars.find('option:last').attr('selected', true);
} else {
objMyCars.find('option:selected').prev().attr('selected', true);
}
});
});