jQuery Imposta l'opzione selezionata utilizzando Avanti

Question

Come posso, usando jQuery, impostare l'elemento "successivo" di un elemento già selezionato come "selezionato".

Per esempio, se ho:

<select> 
<option value="1" >Number 1</option> 
<option value="2" selected="selected">Number 2</option> 
<option value="3" >Number 3</option> 
<option value="4" >Number 4</option> 
</select> 

Possiamo vedere che "Numero 2" è selezionato, e l'utilizzo di jQuery, mi piacerebbe impostare "Numero 3" come selezionato, e rimuovere il selezionato "attributo" da "Numero 2". Suppongo di dover utilizzare il selettore successivo allo , ma non sono sicuro di come implementarlo.

Answer 1

$('option:selected', 'select').removeAttr('selected').next('option').attr('selected', 'selected'); 

Partenza codice lavorare qui http://jsbin.com/ipewe/edit

Answer 2

è possibile utilizzare

$('option:selected').next('option') 

o

$('option:selected + option') 

e impostare il valore:

var nextVal = $('option:selected + option').val(); 
$('select').val(nextVal); 

Answer 3

Aggiornamento:

Come di jQuery 1.6 + si dovrebbe usare prop() invece di attr() in questo caso.

La differenza tra attributi e proprietà può essere importante nelle situazioni specifiche . Prima di jQuery 1.6, il metodo .attr() a volte prendeva in considerazione i valori delle proprietà durante il recupero di alcuni attributi, che potrebbero causare un comportamento incoerente. A partire da jQuery 1.6, il metodo .prop() fornisce un modo per recuperare esplicitamente i valori delle proprietà, mentre .attr() richiama gli attributi.

var theValue = "whatever"; 
$("#selectID").val(theValue).prop('selected',true); 

risposta originale:

Se si desidera selezionare il valore dell'opzione, indipendentemente dalla sua posizione (questo esempio presuppone di avere un ID per la vostra selezione):

var theValue = "whatever"; 
$("#selectID").val(theValue).attr('selected',true); 

Non è necessario "deselezionare". Ciò accade automaticamente quando ne selezioni un altro.

Answer 4

E se si desidera specificare di selezionare ID:

$("#nextPageLink").click(function(){ 
    $('#myselect option:selected').next('option').attr('selected', 'selected'); 
    $("#myselect").change(); 
}); 

Se si fa clic sulla voce con ID "nextPageLink", opzione successiva saranno selezionati e onChange() evento sarà chiamato. Può essere il seguente:

$("#myselect").change(function(){ 
    $('#myDivId').load(window.location.pathname,{myvalue:$("select#myselect").val()}); 
}); 

L'evento OnChange() utilizza Ajax per caricare qualcosa nel div specificato.

window.location.pathname = actual address

L'evento OnChange() è definito perché consente di modificare il valore non solo utilizzando il pulsante netx/prev, ma direttamente utilizzando la selezione standard. Se il valore è cambiato, la pagina fa automaticamente qualcosa.

Answer 5

trovare la riga, quindi

var row = $('#yourTable'); 

il valore che si desidera selezionare

var theValue = "5"; 
row.find("select:eq(2)").find("option[value="+theValue+']').attr('selected','selected'); 

Answer 6

$('#next').click(function(){ 
    $('#colored_background option:selected').next('option').attr('selected', 'selected'); 
    changeBackgroundColor(); 
}); 

Lavorare in What is my favorite color?. Clicca sulle frecce.

Answer 7

A partire dalla versione 1.6.1 in poi, si consiglia di utilizzare il metodo puntello per attributi booleani/proprietà quali selezionato, sola lettura, abilitata, ...

var theValue = "whatever"; 
$("#selectID").val(theValue).prop('selected',true); 

Per ulteriori informazioni, si prega di fare riferimento al di http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Answer 8

Questo è quello che ho appena usato, mi piace come è pulito :-)

$('select').val(function(){ 
    var nextOption = $(this).children(':selected').next(); 
    return $(nextOption).val(); 
}).change(); 

Answer 9

$("select").prop("selectedIndex",$("select").prop("selectedIndex")+1) 

Answer 10

$('your_select option:selected').next('option').prop('selected', true) 

Answer 11

$('#my_sel').val($('#my_sel option:selected').next().val()); 
$('#my_sel').val($('#my_sel option:selected').prev().val());