javascript - selectores - Seleccione la siguiente opción con jQuery

seleccionar varios elementos jquery

Question

Estoy tratando de crear un botón que puede seleccionar la siguiente opción.

Entonces, tengo un select (id = selectionChamp) con varias opciones, una entrada siguiente (id = fieldNext), y trato de hacer eso

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

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

Pero no puedo seleccionar la siguiente opción ... Gracias!

Answer 1

Bastante simple sin jQuery también. Este pasará a la primera opción una vez que se alcance la última:

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

Algunas marcas de prueba:

<button id="fieldNext">Select next</button>
<select id="selectionChamp">
 <option>0
 <option>1
 <option>2
</select>

Answer 2

Las otras soluciones no funcionan en caso de que existan elementos de grupo de opciones además de elementos de opciones. En ese caso, esto parece funcionar:

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

(Puede pensar que la expresión para i también podría escribirse como options.index(":selected") , pero eso no siempre funciona. No sé por qué, una explicación sería bienvenida).

Answer 3

Prueba esto :

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

Answer 4

Yo esperaría que ese botón pase por las opciones, y también que active un evento de cambio. Aquí es posible la solución para eso:

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

Aquí está jsFiddle: jsfiddle.net/acosonic/2cg9t17j/3

Answer 5

$(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

Answer 6

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

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

Answer 7

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

    alert($(''#selectionChamp'').val());      
});

Answer 8

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

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