使用jQuery选择下一个选项

Question

我正在尝试创建一个可以选择下一个选项的按钮.

所以,我有一个select(id = selectionChamp)有几个选项,一个输入接下来(id = fieldNext),我尝试这样做:

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

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

但我无法选择下一个选项..谢谢!

Answer 1

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

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

Answer 2

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

演示: http ://jsfiddle.net/w9kcd/1/

Answer 3

没有jQuery也很简单.一旦达到最后一个,这个将循环到第一个选项:

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

一些测试标记:

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