Select next option with jQuery

问题

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 !

回答1:

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

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

回答2:

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

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

回答3:

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>

回答4:

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

回答5:

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/

回答6:

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

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

回答7:

Try this :

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

回答8:

The other solutions don't work in case there are optiongroup elements in addition to option elements. In that case, this seems to work:

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

(You may think that the expression for i could also be written as options.index(":selected"), but that doesn't always work. I don't know why, an explanation would be welcome.)

来源：https://stackoverflow.com/questions/11556557/select-next-option-with-jquery

标签

javascript

jquery

option