jQuery Set Select Index

Tengo un cuadro de selección:

 Number 0 Number 1 Number 2 Number 3 Number 4 Number 5 Number 6 Number 7  

Me gustaría establecer una de las opciones como “seleccionada” en función de su índice seleccionado.

Por ejemplo, si estoy tratando de establecer “Número 3”, estoy intentando esto:

 $('#selectBox')[3].attr('selected', 'selected'); 

Pero esto no funciona. ¿Cómo puedo establecer una opción como seleccionada según su índice usando jQuery?

¡Gracias!

NOTA : la respuesta depende de jQuery 1.6.1+

 $('#selectBox :nth-child(4)').prop('selected', true); // To select via index $('#selectBox option:eq(3)').prop('selected', true); // To select via value 

Gracias por el comentario, .get no funcionará, ya que devuelve un elemento DOM, no un jQuery. Tenga en cuenta que la función .eq puede usarse fuera del selector si lo prefiere.

 $('#selectBox option').eq(3).prop('selected', true); 

También puede ser más conciso / legible si desea usar el valor , en lugar de confiar en seleccionar un índice específico:

 $("#selectBox").val("3"); 

Nota: .val(3) funciona igual para este ejemplo, pero los valores no numéricos deben ser cadenas, por lo que elegí una cadena para coherencia.
(Por ejemplo, requiere que uses .val("hello") )

Esto también puede ser útil, así que pensé en agregarlo aquí.

Si desea seleccionar un valor basado en el valor del artículo y no en el índice de ese artículo, puede hacer lo siguiente:

Su lista de selección:

  

El jquery:

 $('#selectBox option[value=C]').attr('selected', 'selected'); 

 $('#selectBox option[value=C]').prop('selected', true); 

El elemento seleccionado sería “Número 2” ahora.

Pruebe esto en su lugar:

 $("#selectBox").val(3); 

también, mira si esto te ayuda:

http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/

Aún más simple:

 $('#selectBox option')[3].selected = true; 
 # Set element with index $("#select option:eq(2)").attr("selected", "selected"); # Set element by text $("#select").val("option Text").attr("selected", "selected"); 

cuando desee seleccionar las mejores formas de selección del conjunto, puede usar
$('#select option').removeAttr('selected'); para eliminar selecciones anteriores.

 # Set element by value $("#select").val("2"); # Get selected text $("#select").children("option:selected").text(); # use attr() for get attributes $("#select option:selected").text(); # use attr() for get attributes # Get selected value $("#select option:selected").val(); $("#select").children("option:selected").val(); $("#select option:selected").prevAll().size(); $("option:selected",this).val(); # Get selected index $("#select option:selected").index(); $("#select option").index($("#select option:selected")); # Select First Option $("#select option:first"); # Select Last Item $("#select option:last").remove(); # Replace item with new one $("#select option:eq(1)").replaceWith(""); # Remove an item $("#select option:eq(0)").remove(); 

Lo que es importante entender es que val() para un elemento select devuelve el valor de la opción seleccionada, pero no el número de elementos como lo hace selectedIndex en javascript.

Para seleccionar la opción con value="7" puedes simplemente usar:

 $('#selectBox').val(7); //this will select the option with value 7. 

Para anular la selección de la opción, use una matriz vacía:

 $('#selectBox').val([]); //this is the best way to deselect the options 

Y, por supuesto, puedes seleccionar múltiples opciones *:

 $('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7 

* Sin embargo, para seleccionar múltiples opciones, su elemento debe tener un atributo MULTIPLE , de lo contrario no funcionará.

Siempre he tenido problemas con prop (‘seleccionado’), lo siguiente siempre me ha funcionado:

 //first remove the current value $("#selectBox").children().removeAttr("selected"); $("#selectBox").children().eq(index).attr('selected', 'selected'); 

Prueba esto:

 $('select#mySelect').prop('selectedIndex', optionIndex); 

Eventualmente, desencadenar un evento .change:

 $('select#mySelect').prop('selectedIndex', optionIndex).change(); 

Espero que esto también ayude

 $('#selectBox option[value="3"]').attr('selected', true); 

Para aclarar las respuestas de Marc y John Kugelman, podrías usar:

 $('#selectBox option').eq(3).attr('selected', 'selected') 

get() no funcionará si se usa de la forma especificada porque obtiene el objeto DOM, no un objeto jQuery, por lo que la siguiente solución no funcionará:

 $('#selectBox option').get(3).attr('selected', 'selected') 

eq() obtiene los filtros jQuery configurados a los del elemento con el índice especificado. Está más claro que $($('#selectBox option').get(3)) . No es tan eficiente. $($('#selectBox option')[3]) es más eficiente (ver caso de prueba ).

En realidad, no necesitas el objeto jQuery. Esto hará el truco:

 $('#selectBox option')[3].selected = true; 

http://api.jquery.com/get/

http://api.jquery.com/eq/

Otro punto vitalmente importante:

El atributo “seleccionado” no es cómo se especifica un botón de opción seleccionado (al menos en Firefox y Chrome). Use el atributo “marcado”:

 $('#selectBox option')[3].checked = true; 

Lo mismo ocurre con las casillas de verificación.

En 1.4.4 obtienes un error: $ (“# optionBox option”) [3] .attr no es una función

Esto funciona: $('#name option:eq(idx)').attr('selected', true);

Donde #name es id seleccionado e idx es el valor de la opción que desea seleccionar.

El atributo javascript selectedIndex puro es el camino correcto porque es puro javascript y funciona en todos los navegadores:

 $('#selectBox')[0].selectedIndex=4; 

Aquí hay una demostración jsfiddle con dos listas desplegables que usan una para establecer la otra:

   

También puede llamar a esto antes de cambiar el selectedIndex si lo que desea es el atributo “seleccionado” en la etiqueta de opción ( aquí está el violín ):

 $('#selectBox option').removeAttr('selected') .eq(this.selectedIndex).attr('selected','selected'); 

seleccione la tercera opción

 $('#selectBox').val($('#selectBox option').eq(2).val()); 

Ejemplo en jsfiddle

NÓTESE BIEN:

 $('#selectBox option')[3].attr('selected', 'selected') 

es incorrecto, la deferencia de la matriz te da el objeto dom, no un objeto jquery, por lo que fallará con un TypeError, por ejemplo en FF con: “$ (‘# optionBox option’) [3] .attr () no es una función ”

 //funcion para seleccionar por el text del select var text = ''; var canal = ($("#name_canal").val()).split(' '); $('#id_empresa option').each(function(i, option) { text = $('#id_empresa option:eq('+i+')').text(); if(text.toLowerCase() == canal[0].toLowerCase()){ $('#id_empresa option:eq('+i+')').attr('selected', true); } }); 
 $('#selectBox option').get(3).attr('selected', 'selected') 

Al usar lo anterior, seguí recibiendo errores en webkit (Chrome) diciendo:

“UnEught TypeError: Object # no tiene ningún método ‘attr'”

Esta syntax detiene esos errores.

 $($('#selectBox option').get(3)).attr('selected', 'selected'); 

Seleccione el artículo según el valor en la lista de selección (especialmente si los valores de la opción tienen un espacio o un carácter extraño) simplemente haciendo esto:

 $("#SelectList option").each(function () { if ($(this).val() == "1:00 PM") $(this).attr('selected', 'selected'); }); 

Además, si tiene un menú desplegable (a diferencia de una selección múltiple) es posible que desee hacer un break; por lo que no se sobrescribe el primer valor encontrado.

Necesito una solución que no tenga valores codificados en el archivo js; usando selectedIndex . La mayoría de las soluciones dadas fallaron en un navegador. Esto parece funcionar en FF10 e IE8 (¿alguien más puede probar en otras versiones?)

 $("#selectBox").get(0).selectedIndex = 1; 

Si solo desea seleccionar un artículo basado en una propiedad particular de un ítem, entonces la opción jQuery de tipo [prop = val] obtendrá ese ítem. Ahora no me importa el índice, solo quería el artículo por su valor.

 $('#mySelect options[value=3]).attr('selected', 'selected'); 

Me enfrenté al mismo problema. Primero necesita pasar por los eventos (es decir, qué evento está sucediendo primero).

Por ejemplo:

El primer evento está generando un cuadro de selección con opciones.

El segundo evento es seleccionar la opción predeterminada usando cualquier función como val (), etc.

Debe asegurarse de que el Segundo evento ocurra después del Primer evento .

Para lograr esto, tome dos funciones, digamos generateSelectbox () (para generar el cuadro de selección) y seleccioneDefaultOption ()

Debe asegurarse de que selectDefaultOption () se invoque solo después de la ejecución de generateSelectbox ()

También puede iniciar múltiples valores si su selectbox es un multipl:

 $('#selectBox').val(['A', 'B', 'C']); 

puede establecer el valor de la variable selectoption dinámicamente y también se seleccionará la opción. Puede probar el siguiente código

código:

   

  $(function(){ $('#allcheck').click(function(){ // $('#select_option').val([1,2,5]);also can use multi selectbox // $('#select_option').val(1); var selectoption=3; $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected'); }); }); 

CÓDIGO HTML:

   
Select   click for select option

Dentro de poco:

$("#selectBox").attr("selectedIndex",index)

donde index es el índice seleccionado como entero.