jQuery

2012-07-19 9 views
19

ile sonraki seçeneği seçin Bir sonraki seçeneği seçebileceğiniz bir düğme oluşturmaya çalışıyorum.jQuery

Yani, çeşitli seçeneklerin bulunduğu bir seçme (id = selectionChamp), bir giriş bir sonraki (id = fieldNext) var ve ben bunu deneyin:

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

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

Ama sonraki seçeneği seçemezsiniz .. Teşekkürler !

+0

Sayfa yüklenirken DOM yükleniyor mu? – Dev

+0

Ne demek istiyorsun? –

+0

, bu kodu hazır fonksiyonda mı kullanıyorsunuz? – Dev

cevap

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

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

FF'de kırık 32.0.3 – njahnke

+4

Geçerli seçeneğin seçiminin kaldırılması gerekiyorsa, ör. '$ ('# selectionChamp seçeneği: seçili'). attr ('selected', false);' – anthonygore

+0

evet ... ancak select tag'de birden fazla özellik ayarlanmışsa. Ancak, isterseniz yanıtı güncellemekte özgürsünüz. – bugwheels94

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

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

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

0

bu deneyin:

$(document).ready(function(){ 
     $("#fieldNext").on("click",function(){ 
      $optionSelected = $("#selectionChamp > option:selected"); 
      $optionSelected.removeAttr("selected"); 
      $optionSelected.next("option").attr("selected","selected");  
     }); 
    }); 
2
$(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

8

jQuery olmadan da oldukça basit. Geçen kez birinci seçeneğe etrafında Bu bir şekilde döngü ulaşıldığında:

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

Bazı deney işaretleme:

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

+1. Bazı iyi vanilya JS çözümleri gönderdiniz! Çok yardımcı olur! – A1rPun

0

diğer çözümler seçeneğine ek elemanların OptionGroup durumunda orada çalışmıyor elementler. Bu durumda, bu iş gibi görünüyor:

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

(Sen i için ifadesi de options.index(":selected") olarak yazılmış olabilir düşünebilir, ancak bu her zaman ben, bir açıklama yapacağını neden bilmiyorum çalışmıyor. hoş geldiniz.)