Chọn tùy chọn tiếp theo với jQuery

Question

Tôi đang cố tạo nút có thể chọn tùy chọn tiếp theo.

Vì vậy, tôi có một lựa chọn (id = selectionChamp) với một số tùy chọn, một đầu vào tiếp theo (id = fieldNext), và tôi cố gắng để làm điều đó:

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

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

Nhưng tôi không thể chọn tùy chọn tiếp theo .. Cảm ơn !

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

Hãy thử điều này:

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

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

Khá đơn giản mà không cần jQuery. Điều này một ý chí vòng xung quanh để lựa chọn đầu tiên khi người cuối cùng đạt được:

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

Một số đánh dấu kiểm tra:

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

Answer 7

Các giải pháp khác không có tác dụng trong trường hợp có yếu tố optiongroup ngoài tùy chọn các yếu tố. Trong trường hợp đó, điều này dường như làm việc:

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

(Bạn có thể nghĩ rằng biểu thức cho i cũng có thể được viết như options.index(":selected"), nhưng điều đó không phải lúc nào cũng làm việc tôi không biết tại sao, một lời giải thích sẽ. được chào đón.)