jQuery로 다음 옵션 선택

Question

다음 옵션을 선택할 수있는 버튼을 만들려고합니다.

그래서, 나는 몇 가지 옵션이 선택 (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').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

이 시도 :

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

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> 

Answer 7

다른 솔루션을 옵션에 추가 요소 optiongroup가있는 경우에는 작동하지 않습니다 집단. 이 경우,이 작동하는 것 같다 :

이

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

(당신은 i에 대한 표현도 options.index(":selected")로 작성 될 수 있다고 생각할 수 있지만, 항상 내가, 설명이 왜 모르는 작동하지 않습니다. 환영합니다.)