jQuery Set Select Index


259

Tengo un cuadro 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 "seleccionada" en función de su índice seleccionado.

Por ejemplo, si estoy tratando de establecer el "Número 3", estoy intentando esto:

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

Pero esto no funciona. ¿Cómo puedo configurar una opción como seleccionada en función de su índice usando jQuery?

¡Gracias!


2
Esto es casi exactamente lo mismo que su pregunta anterior: stackoverflow.com/questions/1280369/…
Kobi

Respuestas:


452

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, .getno funcionará ya que devuelve un elemento DOM, no uno jQuery. Tenga en cuenta que la .eqfunción 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 usar el valor , en lugar de confiar en seleccionar un índice específico :

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

Nota: .val(3) funciona también para este ejemplo, pero los valores no numéricos deben ser cadenas, por lo que elegí una cadena para mantener la coherencia.
(por ejemplo, <option value="hello">Number3</option>requiere que lo use .val("hello"))


77
+1 - La segunda opción funcionó para mí. La respuesta elegida por John Kugelman no funcionó para mí en IE7.
P.Brian.Mackey

2
Lamentablemente, ninguna de estas formas dispara un evento de cambio () para mí. Tengo $ ('# selectBox'). Change (function () {alert ('changed')});
Mike Jones

28
@mikejones: eso es por diseño. Cuando está configurando mediante programación una opción seleccionada, es posible que no siempre desee que se active el evento de cambio enlazado (como en un evento de carga de página). En su caso, simplemente puede llamar a $ ('# selectBox'). Change (); después de haber llamado $ ('# selectBox'). val ("3");
Marcus Pope

2
¿Es la primera opción 0 o 1?
Lee Meador

3
Pensé que valía la pena mencionar que post-jQuery 1.6.1, el método recomendado para modificar las propiedades booleanas de un elemento es en .prop()lugar de hacerlo .attr().
DevlshOne

113

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

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

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


nota: hay un guión bajo adicional después de $ () ... de lo contrario, esto funciona fantásticamente
Dusty J

1
+1 No pude hacer que esto funcionara exactamente, pero de esto finalmente conseguí que funcionara con la siguiente sintaxis: $ ("# selectBox option [value = 'C']") [0] .selected = true;
Wes Grant

55
Solo tenga en cuenta que .attr('selected', 'selected')no debe usarse varias veces en la misma selección, ya que algunos navegadores pueden confundirse (en algunos casos comienzan a marcar varios elementos en el dom como selected=selected". Si necesita cambiar el valor seleccionado con más frecuencia (por ejemplo, en un botón haga clic) use .prop('selected', true)según lo sugerido por Marc. - ¡Simplemente ha tenido mucho dolor - y ha perdido el tiempo - debido a este problema!
Tom Fink

66

Intenta esto en su lugar:

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

2
¡Esto también hace que copiar de un elemento a otro sea muy sencillo!
Sonny

error tipográfico: después de "selectBox te falta una cita
Niels Bom

1
Esto es simple y directo. Prefiero esta solución.
Dan Bailiff

Esto funciona en Chrome, pero no funciona para mí con IE9. Yo uso: $ ('# opción selectBox') [3] .selected = true; (contesta marns)
cederlof

FWIW, esto ni siquiera funciona en Chrome para mí. Usar la respuesta ": nth-child" funcionó para mí.
Jay Taylor

50

Aún más simple:

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

1
Esto funcionó para mí, también necesitaba seleccionar por ÍNDICE, no por VALOR.
Alan

1
Esta respuesta me dio lo que necesitaba ... Me faltaba la parte 'opción' del selector cuando intentaba seleccionar por nombre $ ('opción' select [name = "select_name"]) [index] .selected = true;
Smith Smithy

16
# 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 con las mejores formas de selección de conjuntos, 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("<option value='2'>new option</option>");

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

+1 para: $ ('# opción de selección'). RemoveAttr ('seleccionado'); opción más simple para devolver el elemento 'seleccionado' al principio, o no hay una selección definida.
Michael Trouw

11

Lo importante es comprender que val()para un selectelemento devuelve el valor de la opción seleccionada, pero no el número de elemento como lo hace selectedIndexen javascript.

Para seleccionar la opción con value="7"simplemente puede 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, puede seleccionar varias opciones *:

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

* Sin embargo, para seleccionar varias opciones, su <select>elemento debe tener un MULTIPLEatributo, de lo contrario no funcionará.


11

Siempre he tenido problemas con la utilería ('seleccionado'), lo siguiente siempre me ha funcionado:

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

8

Prueba esto:

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

Finalmente, desencadena un evento .change:

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

6

Espero que esto pueda ayudar también

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


4

NÓTESE BIEN:

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

es incorrecto, la deferencia de la matriz obtiene el objeto dom, no un objeto jquery, por lo que fallará con un TypeError, por ejemplo en FF con: "$ ('# selectBox option') [3] .attr () no es una función ".


4

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

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

get() no funcionará si se usa de la manera 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()gets filtra el conjunto jQuery al del elemento con el índice especificado. Es más claro que $($('#selectBox option').get(3)). No es tan eficiente. $($('#selectBox option')[3])es más eficiente (ver caso de prueba ).

Sin embargo, en realidad no necesita el objeto jQuery. Esto hará 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 cómo se especifica un botón de opción seleccionado (en Firefox y Chrome al menos). Use el atributo "marcado":

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

Lo mismo ocurre con las casillas de verificación.


4

En 1.4.4 se obtiene un error: $ ("# selectBox option") [3] .attr no es una función

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

Donde #namees select id y idxes el valor de la opción que desea seleccionar.


4

El atributo puro javascript selectedIndex es la forma correcta de hacerlo porque es puro javascript y funciona en varios navegadores:

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

Aquí hay una demostración de jsfiddle con dos menús desplegables que usan uno para configurar 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 esto antes de cambiar el índice seleccionado 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');

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

2

A menudo uso el disparador ('cambio') para que funcione

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

Ejemplo con id select = selectA1 y position_index = 0 (primera opción en select):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

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

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

"Error de tipo no capturado: el objeto # no tiene el método 'attr'"

Esta sintaxis detiene esos errores.

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

1

Seleccione el elemento en función del 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 (en lugar de una selección múltiple), es posible que desee hacer una break;para no sobrescribir el primer valor encontrado.


1

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

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

1

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

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

1

Me enfrenté al mismo problema. Primero debe pasar por los eventos (es decir, qué evento está ocurriendo 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 cuadro de selección) y selectDefaultOption ()

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


1

También puede iniciar varios valores si su cuadro de selección es un múltiplo:

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

0

puede establecer el valor de la variable selectoption dinámicamente y se seleccionará la opción. Puede intentar con el 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>


-2

Dentro de poco:

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

donde index es el índice seleccionado como entero.


este código funciona $ ('# selectBox'). prop ({selectedIndex: desiredIndex})
jurijcz
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.