web-dev-qa-db-fra.com

Sélectionnez l'option suivante avec jQuery

J'essaie de créer un bouton qui peut sélectionner l'option suivante.

Donc, j'ai un select (id = selectionChamp) avec plusieurs options, une entrée ensuite (id = fieldNext), et j'essaie de le faire:

$('#fieldNext').click(function() {
    $('#selectionChamp option:selected', 'select').removeAttr('selected')
          .next('option').attr('selected', 'selected');

    alert($('#selectionChamp option:selected').val());      
});

Mais je ne peux pas sélectionner l'option suivante .. Merci!

javascriptjqueryoptionnext
27
Clément Andraud
$('#fieldNext').click(function() {
    $('#selectionChamp option:selected').next().attr('selected', 'selected');

    alert($('#selectionChamp').val());      
});
30
bugwheels94
$("#fieldNext").click(function() {
    $("#selectionChamp > option:selected")
        .prop("selected", false)
        .next()
        .prop("selected", true);
});​

DEMO: http://jsfiddle.net/w9kcd/1/

16
VisioN

Assez simple sans jQuery aussi. Celui-ci passera en boucle à la première option une fois la dernière atteinte:

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;
}

Quelques balises de test:

<button id="fieldNext">Select next</button>
<select id="selectionChamp">
 <option>0
 <option>1
 <option>2
</select>
9
RobG
$(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

2
Riz

Je m'attendrais à ce que ce bouton boucle à travers les options et déclenche également un événement de changement. Voici une solution possible pour cela:

$("#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');
});

Voici jsFiddle: http://jsfiddle.net/acosonic/2cg9t17j/3/

1
Aleksandar Pavić
$('#fieldNext').click(function() {
$('#selectionChamp option:selected').removeAttr('selected')
      .next('option').attr('selected', 'selected');

alert($('#selectionChamp option:selected').val());      
});
0
user1047100

Essaye ça :

    $(document).ready(function(){
        $("#fieldNext").on("click",function(){
            $optionSelected = $("#selectionChamp > option:selected");
            $optionSelected.removeAttr("selected");
            $optionSelected.next("option").attr("selected","selected");       
        });
    });
0
jbrtrnd

Les autres solutions ne fonctionnent pas s'il existe des éléments de groupe d'options en plus des éléments d'options. Dans ce cas, cela semble fonctionner:

var options = $("#selectionChamp option");
var i = options.index(options.filter(":selected"));
if (i >= 0 && i < options.length - 1) {
    options.eq(i+1).prop("selected", true);
}

(Vous pouvez penser que l'expression de i pourrait également être écrite comme options.index(":selected"), mais cela ne fonctionne pas toujours. Je ne sais pas pourquoi, une explication serait la bienvenue.)

0
robinst