Cómo hacer la primera opción de seleccionado con jQuery

Puedes probar esto

$("#target").prop("selectedIndex", 0);

// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

Cuando use

$("#target").val($("#target option:first").val());

Esto no funcionará en Chrome y Safari si el valor de la primera opción es null.

Prefiero

$("#target option:first").attr('selected','selected');

Porque puede funcionar en todos los navegadores.

Cambiar el valor de la entrada select o ajustar el atributo selected puede sobrescribir la propiedad selectedOptions predeterminada del elemento DOM, lo que resulta en un elemento que puede no restablecerse correctamente en un formulario al que se ha llamado el evento reset.

Use el método prop de jQuery para borrar y establecer la opción necesaria:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

$("#target")[0].selectedIndex = 0;

Un punto sutil que creo que he descubierto sobre las respuestas más votadas es que a pesar de que cambian correctamente el valor seleccionado, no actualizan el elemento que el usuario ve (solo cuando hacen clic en el widget verán una verificación junto al elemento actualizado).

Encadenamiento a .change () call to the end también actualizará el widget de interfaz de usuario también.

$("#target").val($("#target option:first").val()).change();

(Tenga en cuenta que noté esto mientras usaba jQuery Mobile y un cuadro en Chrome desktop, por lo que puede que no sea el caso en todas partes).

Si tiene opciones deshabilitadas, puede agregar not ([disabled]) para evitar seleccionarlas, lo que resulta en lo siguiente:

$("#target option:not([disabled]):first").attr('selected','selected')

Otra forma de restablecer los valores (para múltiples elementos seleccionados) podría ser esta:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

$('#newType option:first').prop('selected', true)

Así de simple:

$('#target option:first').prop('selected', true);

He encontrado que solo establecer attr seleccionado no funciona si ya hay un atributo seleccionado. El código que utilizo ahora primero desajustará el atributo seleccionado y luego seleccionará la primera opción.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

Así es como lo haría:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

Aunque la función each probablemente no sea necesaria ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

Funciona para mí.

Si vas a usar la primera opción como un valor predeterminado como

<select>
    <option value="">Please select an option below</option>
    ...

Entonces puedes usar:

$('select').val('');

Es agradable y simple.

Uso:

$("#selectbox option:first").val()

Por favor, encuentre el simple de trabajo en este JSFiddle.

En la parte posterior de la respuesta de James Lee Baker, prefiero esta solución, ya que elimina la dependencia del soporte del navegador para :first :selected ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

Solo funcionó para mí usando un disparador ('change') al final, como esto:

$("#target option:first").attr('selected','selected').trigger('change');

Para mí solo funcionó cuando agregué el siguiente código:

.change();

Para mí solo funcionó cuando agregué el siguiente código: Como quería "restablecer" el formulario, es decir, seleccionar todas las primeras opciones de todas las selecciones del formulario, utilicé el siguiente código:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

$("#target").val(null);

Funcionó bien en chrome

Si está almacenando el objeto jQuery del elemento select:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

Uso:

alert($( "#target option:first" ).text());

Compruebe este mejor enfoque usando jQuery con ECMAScript 6:

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

Para mí, solo funcionó cuando agregué la siguiente línea de código

$('#target').val($('#target').find("option:first").val());

Puede seleccionar cualquier opción de dropdown usándola.

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val());