jQuery Elija Índice

Question

tengo una caja de selección:

<select id="selectBox"> 
    <option value="0">Number 0</option> 
    <option value="1">Number 1</option> 
    <option value="2">Number 2</option> 
    <option value="3">Number 3</option> 
    <option value="4">Number 4</option> 
    <option value="5">Number 5</option> 
    <option value="6">Number 6</option> 
    <option value="7">Number 7</option> 
</select> 

me gustaría establecer una de las opciones como "seleccionado" basa en que está seleccionado índice.

Por ejemplo, si yo estoy tratando de establecer "Número 3", estoy tratando 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!

Answer 1

Tal vez puedas probar:

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

También, ver si esto le ayuda a:

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

Answer 2

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 también se puede usar fuera del selector si lo prefiere.

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

---

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

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

Nota:.val(3) funciona igual de bien para este ejemplo, pero los valores no numéricos deben ser cadenas, así que elegí una cadena por coherencia.
(por ejemplo <option value="hello">Number3</option> requiere que usted utilice .val("hello"))

Answer 3

Esto también puede ser útil, así que pensé que me gustaría añadir aquí.

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

Su lista de selección:

<select id="selectBox"> 
    <option value="A">Number 0</option> 
    <option value="B">Number 1</option> 
    <option value="C">Number 2</option> 
    <option value="D">Number 3</option> 
    <option value="E">Number 4</option> 
    <option value="F">Number 5</option> 
    <option value="G">Number 6</option> 
    <option value="H">Number 7</option> 
</select> 

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.

Answer 4

NB:

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

es incorrecta, la deferencia matriz que obtiene el objeto dom, no un objeto jQuery, por lo que se producirá un error con un TypeError, por ejemplo, en FF: "$ ('# selectbox option ') [3] .attr() no es una función. "

Answer 5

En 1.4.4 se produce un error: $ ("# opción de caja de selección") [3] .attr no es una función

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

Dónde #name es seleccionar la ID y idx es el valor de la opción que desea seleccionar.

Answer 6

aún más simple:

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

Answer 7

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

Cuando se utiliza el anterior seguí recibiendo errores en WebKit (Chrome) diciendo:

"TypeError no detectada: Objeto # tiene ningún método 'attr'"

Esta sintaxis detiene esos errores.

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

Answer 8

Para aclarar de respuestas de John Kugelman Marc y, que puede usar:

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

get() No funcionará si se utiliza de la manera especificada, ya que 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 filtros jQuery conjunto al 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 test case).

Sin embargo, en realidad no necesita el objeto jQuery. Esto va a hacer el truco:

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

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

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

Otro punto de vital importancia:

El atributo "seleccionado" No es así como se especifica un botón seleccionado (en Firefox y Chrome al menos). Utilice el atributo "marcado":

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

Lo mismo ocurre con las casillas de verificación.

Answer 9

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

Answer 10

Si lo que desea es seleccionar un elemento en base de una propiedad particular de un tema a continuación, la opción de tipo de jQuery [prop = val] va a conseguir ese artículo. Ahora no me importa el índice, solo quería el artículo por su valor.

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

Answer 11

Poco:

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

donde el índice es el índice seleccionado como número entero.

Answer 12

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 de FF10 y IE8 (Puede otra persona de prueba en otras versiones)

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

Answer 13

Seleccione el elemento en función del valor en la lista de selección (sobre todo si los valores de las opciones tienen un espacio o un carácter raro en él) simplemente hacer esto:

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

Además, si usted tiene una lista desplegable (en contraposición a una selección múltiple) es posible que desee hacer un break; por lo que no obtiene el primer valor encontrado a ser sobrescritos .

Answer 14

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 elemento como selectedIndex en javascript.

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

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

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

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

Y, por supuesto, se pueden seleccionar múltiples opciones *:

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

* Sin embargo, para seleccionar varias opciones, suEl elementodebe tener un atributo MULTIPLE; de lo contrario, no funcionará.

Answer 15

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

Por ejemplo:

El Primer evento es la generación de caja de selección de opciones.

El segundo evento es la selección de opción por defecto utilizando cualquier función, como val(), etc.

Debe asegurarse de que el segundo evento debería ocurrir después de que el primer evento .

Para ello toma dos funciones digamos que generateSelectbox() (por genrating caja de selección) y selectDefaultOption()

Usted necesita asegurarse de que selectDefaultOption() debe ser llamado sólo después de la ejecución de generateSelectbox()

Answer 16

también puede init múltiples valores si su caja de selección es un multipl:

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

Answer 17

puede establecer SelectOption valor de la variable de forma dinámica, así como opción será selected.You puede probar siguiente código

código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

 $(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 id="selectBox"> 
     <option value="0">Number 0</option> 
     <option value="1">Number 1</option> 
     <option value="2">Number 2</option> 
     <option value="3">Number 3</option> 
     <option value="4">Number 4</option> 
     <option value="5">Number 5</option> 
     <option value="6">Number 6</option> 
     <option value="7">Number 7</option> 
</select> <br> 
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong> 

Answer 18

# Set element with index 
$("#select option:eq(2)").attr("selected", "selected"); 

# Set element by text 
$("#select").val("option Text").attr("selected", "selected"); 

cuando se desea seleccionar con mejores formas para la selección del, puede utilizar
$('#select option').removeAttr('selected'); para eliminar selecciona 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("<option value='2'>new option</option>"); 

# Remove an item 
$("#select option:eq(0)").remove(); 

Answer 19

la esperanza que esto podría ayudar también

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

Answer 20

El javascript puro selectedIndex atributo es el camino correcto a seguir, ya que, es pura javascript y trabaja entre navegadores:

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

Here is a jsfiddle demo con dos menús desplegables que usan uno para establecer el otro:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex"> 
    <option>0</option> 
    <option>1</option> 
    <option>2</option> 
</select> 

<select id="selectBox"> 
    <option value="0">Number 0</option> 
    <option value="1">Number 1</option> 
    <option value="2">Number 2</option> 
</select> 

También puede llamar a este antes de cambiar la selectedIndex si lo que quiere es el atributo "seleccionado" en la etiqueta de opción (here is the fiddle):

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

Answer 21

seleccionar tercera opción

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

Example on jsfiddle

Answer 22

Pruebe esto:

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

Finalmente, desencadenar a.evento de cambio:

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

Answer 23

Siempre he tenido problemas con el puntal ('selected'), la siguiente siempre ha trabajado para mí:

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