Cómo hacer que la primera opción de <seleccionar> seleccionada con jQuery

¿Cómo hago la primera opción de seleccionado con jQuery?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

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

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 usas

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

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

yo prefiero

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

porque puede funcionar en todos los navegadores.

Cambiar el valor de la entrada de selección o ajustar el atributo seleccionado puede sobrescribir la propiedad por defecto seleccionadaOpciones del elemento DOM, lo que da como resultado un elemento que puede no restablecerse correctamente en una forma que ha llamado al evento de restablecimiento.

Use el método de utilería 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 creo haber descubierto sobre las respuestas más votadas es que, a pesar de que cambian correctamente el valor seleccionado, no actualizan el elemento que ve el usuario (solo cuando hacen clic en el widget verán un cheque al lado del elemento actualizado).

Encadenar una llamada .change () al final también actualizará el widget de la interfaz de usuario.

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

(Tenga en cuenta que me di cuenta de esto al usar jQuery Mobile y una caja en el escritorio de Chrome, por lo que este puede no ser el caso en todas partes).

Si ha deshabilitado las opciones, puede agregar no ([deshabilitado]) para evitar seleccionarlas, lo que da como resultado lo siguiente:

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

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

$("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;

});

Tan simple como eso:

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

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

Descubrí que solo establecer attr selected no funciona si ya hay un atributo seleccionado. El código que uso ahora primero desarmará el atributo seleccionado, luego seleccionará la primera opción.

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

Aunque cada función probablemente no sea necesaria ...

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

funciona para mi.

Así es como lo haría:

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

Solo funcionó para mí usando un disparador ('cambio') al final, así:

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

Si va a utilizar la primera opción como predeterminada, como

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

entonces puedes usar:

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

Es lindo y simple.

¡Esto funcionó para mí!

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

En el reverso de la respuesta de James Lee Baker, prefiero esta solución, ya que elimina la dependencia del soporte del navegador para: primero: seleccionado ...

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

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

Utilizar:

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

Encuentre el trabajo simple en este JSFiddle .

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

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

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

funcionó bien en cromo

Si está almacenando el objeto jQuery del elemento select:

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

...

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

Marque este mejor enfoque usando jQuery con ECMAScript 6 :

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

Puede seleccionar cualquier opción dropdownusándola.

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

$('select#id').val($('#id option')[index].value)

Reemplace la identificación con una identificación de etiqueta de selección particular e indexe con el elemento particular que desea seleccionar.

es decir

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

Así que aquí para la selección del primer elemento usaré el siguiente código:

$('select#ddlState').val($('#ddlState option')[0].value)

Utilizar:

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