Select next option with jQuery
$('#fieldNext').click(function() {
$('#selectionChamp option:selected').next().attr('selected', 'selected');
alert($('#selectionChamp').val());
});
Better answer by @VisioN: https://stackoverflow.com/a/11556661/1533609
$("#fieldNext").click(function() {
$("#selectionChamp > option:selected")
.prop("selected", false)
.next()
.prop("selected", true);
});
DEMO: http://jsfiddle.net/w9kcd/1/
$(function(){
$('#button').on('click', function(){
var selected_element = $('#selectionChamp option:selected');
selected_element.removeAttr('selected');
selected_element.next().attr('selected', 'selected');
$('#selectionChamp').val(selected_element.next().val());
});
});
http://jsbin.com/ejunoz/2/edit
Pretty simple without jQuery too. This one will loop around to the first option once the last is reached:
function nextOpt() {
var sel = document.getElementById('selectionChamp');
var i = sel.selectedIndex;
sel.options[++i%sel.options.length].selected = true;
}
window.onload = function() {
document.getElementById('fieldNext').onclick = nextOpt;
}
Some test markup:
<button id="fieldNext">Select next</button>
<select id="selectionChamp">
<option>0
<option>1
<option>2
</select>