Comment définir la première option de < sélectionner > sélectionné avec jQuery

StackOverflow https://stackoverflow.com/questions/1414276

  •  06-07-2019
  •  | 
  •  

Question

Comment choisir la première option de jQuery?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>
Était-ce utile?

La solution

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

Autres conseils

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

Quand vous utilisez

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

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

je préfère

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

car cela peut fonctionner dans tous les navigateurs.

La modification de la valeur de l'entrée select ou l'ajustement de l'attribut sélectionné peuvent écraser la propriété selectedOptions par défaut de l'élément DOM, ce qui entraînerait un élément qui pourrait ne pas être réinitialisé correctement dans un formulaire ayant appelé l'événement reset.

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 sur lequel je pense que j'ai 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 visible par l'utilisateur (uniquement lorsque l'utilisateur clique dessus). le widget verra-t-il une coche à côté de l'élément mis à jour).

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

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

(Notez que j'ai remarqué cela lors de l'utilisation de jQuery Mobile et d'une boîte sur le bureau Chrome. Ce n'est peut-être pas le cas partout).

Si vous avez désactivé les options, vous pouvez ajouter pas ([désactivé]) pour empêcher leur sélection, ce qui donne les résultats suivants:

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

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

Simple comme ça:

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

J'ai constaté que le simple fait de définir l'attr sélectionné ne fonctionne pas s'il existe 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');

Voici comment je le ferais:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .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.

Cela n'a fonctionné 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 simple et agréable.

Au verso de la réponse de James Lee Baker, je préfère cette solution car elle supprime la prise en charge du support du navigateur pour: premier: 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électionnez toutes les premières options de toutes les sélections du formulaire, j’ai utilisé le code suivant:

$ ('formulaire'). find ('sélectionner'). each (fonction () {      $ (this) .val ($ (" option de sélection: première "). val ());      $ (this) .change ();  });

Utiliser:

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

Veuillez trouver le travail simple dans ce JSFiddle .

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

a bien fonctionné 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 & nbsp; 6 :

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

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

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

Vous pouvez sélectionner n'importe quelle option dans liste déroulante en 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 ($ ('option # id') [index] .value)

Remplacez id par l'identifiant de balise de sélection et index par l'élément à sélectionner.

i.e.

<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, je vais utiliser le code suivant:

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

Cela a fonctionné pour moi!

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

Utiliser:

alert($( "#target option:first" ).text());
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top