Comment faire la première option de <select> sélectionnée avec jQuery

Comment puis-je faire la première option de sélectionné avec jQuery?

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

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

Vous pouvez essayer ceci

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

Lorsque vous utilisez

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

cela ne fonctionnera pas dans Chrome et Safari si la première valeur d'option est nulle.

je préfère

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

car il peut fonctionner dans tous les navigateurs.

La modification de la valeur de l'entrée de sélection ou l'ajustement de l'attribut sélectionné peut remplacer la propriété selectedOptions par défaut de l'élément DOM, entraînant un élément qui peut ne pas se réinitialiser correctement sous une forme dont l'événement de réinitialisation a été appelé.

Utilisez la méthode prop de jQuery pour effacer et définir l'option requise:

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

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

Un point subtil que je pense avoir découvert au sujet des réponses les plus votées est que même si elles modifient correctement la valeur sélectionnée, elles ne mettent pas à jour l'élément que l'utilisateur voit (ce n'est qu'en cliquant sur le widget qu'il verra une coche à côté du élément mis à jour).

Le chaînage d'un appel .change () à la fin mettra également à jour le widget UI.

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

(Notez que j'ai remarqué cela en utilisant jQuery Mobile et une boîte sur le bureau Chrome, donc ce n'est peut-être pas le cas partout).

Si vous avez désactivé les options, vous pouvez ajouter non ([désactivé]) pour éviter de les sélectionner, ce qui se traduit par ce qui suit:

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

Une autre façon de réinitialiser les valeurs (pour plusieurs éléments sélectionnés) pourrait être la suivante:

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

});

Aussi simple que ça:

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

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

J'ai trouvé que le simple fait de définir attr sélectionné ne fonctionne pas s'il y a déjà un attribut sélectionné. Le code que j'utilise maintenant désactive d'abord l'attribut sélectionné, puis sélectionne la première option.

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

Bien que chaque fonction ne soit probablement pas nécessaire ...

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

travaille pour moi.

Voici comment je le ferais:

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

Cela ne fonctionnait que pour moi en utilisant un déclencheur («changement») à la fin, comme ceci:

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

Si vous allez utiliser la première option par défaut comme

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

alors vous pouvez simplement utiliser:

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

C'est sympa et simple.

Cela a fonctionné pour moi!

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

Sur le dos de la réponse de James Lee Baker, je préfère cette solution car elle supprime la dépendance à la prise en charge du navigateur pour: d'abord: sélectionné ...

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

Pour moi, cela n'a fonctionné que lorsque j'ai ajouté le code suivant:

.change();

Pour moi, cela n'a fonctionné que lorsque j'ai ajouté le code suivant: Comme je voulais "réinitialiser" le formulaire, c'est-à-dire sélectionner toutes les premières options de toutes les sélections du formulaire, j'ai utilisé le code suivant:

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

Utilisation:

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

Veuillez trouver le fonctionnement simple dans ce JSFiddle .

Pour moi, cela n'a fonctionné que lorsque j'ai ajouté la ligne de code suivante

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

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

bien travaillé en chrome

Si vous stockez l'objet jQuery de l'élément select:

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

...

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

Vérifiez cette meilleure approche en utilisant jQuery avec ECMAScript 6 :

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

Vous pouvez sélectionner n'importe quelle option dropdownen l'utilisant.

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

Remplacez l' id par un ID de tag de sélection particulier et un index par l'élément particulier que vous souhaitez sélectionner.

c'est à dire

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

Donc, ici, pour la sélection du premier élément, j'utiliserai le code suivant:

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

Utilisation:

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