Comment faire pour que la première option de soit sélectionnée avec jQuery

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

 ... ...  

 $("#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 de l’option est NULL.

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 select ou l’ajustement de l’atsortingbut sélectionné peut remplacer la propriété selectedOptions par défaut de l’élément DOM, ce qui entraîne un élément qui ne peut pas être réinitialisé correctement dans un formulaire auquel l’événement de réinitialisation a été appelé.

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

 $("#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 concernant les 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 si elles cliquent sur le widget). élément mis à jour).

Le chaînage d’un appel à .change () à 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, donc ce n’est peut-être pas le cas partout).

Si vous avez désactivé les options, vous pouvez append non ([désactivé]) pour éviter de les sélectionner, ce qui entraîne 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; }); 

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

Aussi simple que ça:

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

J’ai trouvé que le simple fait de sélectionner attr sélectionné ne fonctionnait pas s’il existait déjà un atsortingbut sélectionné. Le code que j’utilise maintenant désactive d’abord l’atsortingbut 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.

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

  

alors vous pouvez simplement utiliser:

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

C’est gentil et simple.

Utilisation:

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

S’il vous plaît trouver le travail simple dans ce JSFiddle .

À la suite de la réponse de James Lee Baker, je préfère cette solution car elle supprime le recours à la prise en charge du navigateur pour:

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

Cela n’a fonctionné que pour moi en utilisant un déclencheur («change») à la fin, comme ceci:

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

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

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

bien travaillé en chrome

Si vous stockez l’object jQuery de l’élément select:

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

Utilisation:

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

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

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 de la dropdown en l’utilisant.

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