I'm trying to create a button that can select next option.
So, i have a select (id=selectionChamp) with several options, an input next (id=fieldNext), and i try to do that :
$('#fieldNext').click(function() {
$('#selectionChamp option:selected', 'select').removeAttr('selected')
.next('option').attr('selected', 'selected');
alert($('#selectionChamp option:selected').val());
});
But I can not select the next option.. Thanks !
jQuery DOM Traversing Get next element To get the next element you can use the . next() method. If you are standing on the "Anna" element and you want to get the next element, "Paul", the . next() method will allow you to do that.
jQuery next() Method The DOM tree: This method traverse forward along the next sibling of DOM elements. Related methods: nextAll() - returns all next sibling elements of the selected element. nextUntil() - returns all next sibling elements between two given arguments.
next( [selector ] )Returns: jQuery. Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
$('#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/
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>
$(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
I would expect such button to loop thru options, and also to trigger change event. Here is possible solution for that:
$("#fieldNext").click(function() {
if ($('#selectionChamp option:selected').next().length > 0)
$('#selectionChamp option:selected').next().attr('selected', 'selected').trigger('change');
else $('#selectionChamp option').first().attr('selected', 'selected').trigger('change');
});
Here is jsFiddle: http://jsfiddle.net/acosonic/2cg9t17j/3/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With