jQuery Establecer la opción seleccionada utilizando Siguiente

¿Cómo puedo, usando jQuery, establecer el elemento "siguiente" de un elemento ya seleccionado como "seleccionado".jQuery Establecer la opción seleccionada utilizando Siguiente

Por ejemplo, si tengo:

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

Podemos ver que el "número 2" está seleccionado, y el uso de jQuery, me gustaría establecer "Número 3" como seleccionado, y quitar el seleccionado "atributo" de "Número 2". Supongo que necesito usar el siguiente selector, pero no estoy muy seguro de cómo implementarlo.

Fuente

2009-08-14 Anonymous

Hay otro hilo con mucha información sobre cómo obtener las opciones seleccionadas que fue útil (realmente me envió aquí). La banda de rodadura está aquí: http://stackoverflow.com/questions/1280499/jquery-set-select-index –

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

Salida código de trabajo aquí http://jsbin.com/ipewe/edit

Fuente

2009-08-14 21:46:57 Dhana

¿Se requiere eliminar el atributo del seleccionado actualmente? Podría estar equivocado, pero creo que no? La llamada '.attr' debe ser reemplazada por .prop para cualquier versión reciente de jquery, hasta donde yo sé, ¿verdad? – codeling

puede utilizar

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

$('option:selected + option')

y establecer el valor:

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

Fuente

2009-08-14 21:47:34 Kobi

115

Actualización:

A partir de jQuery 1.6 + se debe utilizar en lugar de prop()attr() en este caso.

La diferencia entre los atributos y las propiedades puede ser importante en situaciones específicas de . Antes de jQuery 1.6, el método .attr() a veces tenía en cuenta los valores de propiedad al recuperar algunos atributos, , lo que podría causar un comportamiento incoherente. A partir de jQuery 1.6, el método .prop() proporciona una forma de recuperar explícitamente valores de propiedad, mientras que .attr() recupera atributos.

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

respuesta original:

Si desea seleccionar el valor de la opción, con independencia de su posición (este ejemplo asume que tiene un ID para su selecto):

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

No es necesario "deseleccionar". Eso sucede automáticamente cuando seleccionas otro.

Fuente

2010-05-25 08:16:55 GtotheB

Tu respuesta es una respuesta más completa. Lo cual casi un año después ha ayudado. Gracias. –

Un año después sí, pero acabo de encontrar este código. Cometió un pequeño error al asumir que el elemento se deseleccionó automáticamente al seleccionar otro. Ese no es el caso cuando la lista de opciones es de selección múltiple. Solo quería señalarlo en caso de que alguien esperara ese comportamiento y se sintiera frustrado porque no funciona según lo anunciado. – SRM

@SRM - Buen punto. Yo, personalmente, nunca trabajo con selecciones múltiples ... así que nunca se me pasó por la cabeza. Gracias por agregar la aclaración. – GtotheB

Y si desea especificar de seleccione ID:

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

Si hace clic sobre el tema con id "nextPageLink", se seleccionará la siguiente opción y el evento onchange() será llamado. Puede tener este aspecto:

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

OnChange() de eventos utiliza Ajax para cargar algo en div especificado.

window.location.nombre de ruta = dirección real

El evento OnChange() se define porque le permite cambiar el valor no solo usando el botón netx/prev, sino directamente mediante la selección estándar. Si se cambia el valor, la página hace algo automáticamente.

Fuente

2011-01-21 14:10:29 Racky

+1 para indicar que ".change()" debe llamarse manualmente. No saberlo puede causar pesadillas. – everton

El cambio fue mi problema, se seleccionó el valor pero no se muestra en el menú desplegable. – avgbody

buscar la fila, a continuación,

var row = $('#yourTable');

el valor que desee para seleccionar

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

Fuente

2011-04-05 20:03:16 Vins

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

Trabajar en What is my favorite color?. Haga clic en las flechas.

Fuente

2012-06-09 12:36:19

¡Sitio genial! ¿Por qué no mapear la imagen y hacer que las diferentes piezas se puedan seleccionar de esa manera? – DevlshOne

partir de la versión 1.6.1 en adelante, es recomendable utilizar la hélice método para atributos booleanos/propiedades tales como seleccionado, de sólo lectura, habilitado, ...

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

Para obtener más información, consulte a http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Fuente

2012-10-29 07:58:34

Esto es lo que acaba de utilizar, me gusta lo limpio que es :-)

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

Fuente

2013-12-12 10:31:15 Andy

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

Fuente

2013-12-18 14:32:18 zloctb

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

Fuente

2014-02-25 13:37:09 Memonic

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

Fuente

2015-09-07 05:01:18

jQuery Establecer la opción seleccionada utilizando Siguiente

Respuesta

Cuestiones relacionadas