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!

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

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.

Intenta esto en su lugar:

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

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 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();

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

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');

Prueba esto:

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

Finalmente, desencadena un evento .change:

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

Espero que esto pueda ayudar también

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

seleccione 3ra 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 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 ".

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.

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.

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');

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

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');

$('#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');

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.

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; 

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');

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

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

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

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>

Dentro de poco:

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

donde index es el índice seleccionado como entero.