Pregunta

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

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>
¿Fue útil?

Solución

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

Otros consejos

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.

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 de SelectedOptions predeterminada 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.

Utilice 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 que creo que he descubierto sobre las respuestas más votadas es que, aunque cambian correctamente el valor seleccionado, no actualizan el elemento que ve el usuario (solo cuando hacen clic el widget verán un cheque al lado del elemento actualizado).

Encadenar una llamada .change () hasta el final también actualizará el widget UI.

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

(Tenga en cuenta que me di cuenta de esto al usar jQuery Mobile y un cuadro 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 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);

Simple así:

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

Así es como lo haría:

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

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

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

funciona para mí.

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

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

entonces puedes usar:

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

Es agradable y simple.

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, seleccione todas las primeras opciones de todas las selecciones del formulario, utilicé el siguiente código:

$ ('formulario'). find ('select'). each (function () {      $ (this) .val ($ (" opción de selección: primero "). val ());      $ (this) .change ();  });

Uso:

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

Encuentre el trabajo simple en este JSFiddle .

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

Verifique este mejor enfoque usando jQuery con ECMAScript & nbsp; 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 del desplegable usá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 índice 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>

Entonces, para la selección del primer elemento, usaré el siguiente código:

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

¡Esto funcionó para mí!

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

Uso:

alert($( "#target option:first" ).text());
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top