una - seleccionar option select jquery

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

Question

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

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

Answer 1

Así es como lo haría:

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

Answer 2

Aunque la función de cada uno probablemente no sea necesaria ...

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

funciona para mi.

Answer 3

Cambiar el valor de la entrada de selección o ajustar el atributo seleccionado puede sobrescribir la propiedad selectedOptions predeterminada del elemento DOM, dando como resultado un elemento que puede no restablecerse correctamente en un formulario al que se haya llamado el evento de restablecimiento.

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

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

Answer 4

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.

Answer 5

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

Answer 6

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: primero: seleccionado ...

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

Answer 7

Otra forma de restablecer los valores (para varios 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;
});

Answer 8

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

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

Answer 9

Para mi 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, usé el siguiente código:

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

Answer 10

Puede seleccionar cualquier opción del dropdown usándolo.

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

Answer 11

Puedes probar esto

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

Answer 12

Si está almacenando el objeto jQuery del elemento seleccionado:

var jQuerySelectObject = $("...");
...
jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

Answer 13

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

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

Answer 14

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

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

entonces solo puedes usar:

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

Es bonito y sencillo.

Answer 15

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

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

Answer 16

Tan simple como eso:

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

Answer 17

Un punto sutil que creo que descubrí 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 en el widget verán una marca junto al símbolo elemento actualizado).

Al encadenar una llamada .change () al final, también se actualizará el widget de la interfaz de usuario.

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

(Tenga en cuenta que noté esto al usar jQuery Mobile y un cuadro en el escritorio de Chrome, por lo que puede que este no sea el caso en todas partes).

Answer 18

Utilizar:

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

Por favor encuentre el trabajo simple en este JSFiddle .

Answer 19

Utilizar:

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

Answer 20

Verifique este mejor enfoque utilizando jQuery con ECMAScript 6 :

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

Answer 21

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

Reemplace el ID con un ID 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)

Answer 22

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

Answer 23

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

funcionó bien en cromo

Answer 24

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

Answer 25

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

Answer 26

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