web-dev-qa-db-fra.com

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

Comment créer la première option de jQuery?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>
jqueryselect
487
omg
$("#target").val($("#target option:first").val());
847
David Andres

Tu peux essayer ça

$("#target").prop("selectedIndex", 0);
137
Esben
// 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');
103
user149513

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.

62
Jimmy Huang

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");
42
James Lee Baker
$("#target")[0].selectedIndex = 0;
31
danactive

Un point subtil que je pense j'ai découvert sur les réponses les plus votées est que, même si elles changent correctement la valeur sélectionnée, elles ne mettent pas à jour l'élément visible par l'utilisateur cochez à côté de l'é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, ce qui peut ne pas être le cas partout).

18
Bradley Bossard

Si vous avez désactivé les options, vous pouvez ajouter not ([disabled]) pour empêcher leur sélection, ce qui entraîne les éléments suivants:

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

Voici un autre moyen de réinitialiser les valeurs (pour plusieurs éléments sélectionnés):

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

});
14
Nick Petropoulos
$('#newType option:first').prop('selected', true);
8
FFFFFF

Aussi simple que ça: 

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

J'ai constaté que le simple fait de définir 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');
6
Francis Lewis

Voici comment je le ferais:

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

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

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

travaille pour moi.

4
Darth Jon

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 gentil et simple.

2
Gary - ITB

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

$("#target option:first").attr('selected','selected').trigger('change');
2
Pablo S G Pacheco

Utilisation:

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

Veuillez trouver le travail simple dans ce JSFiddle .

1
Chetan

Au verso de la réponse de James Lee Baker, je préfère cette solution car elle supprime le support du navigateur pour:.

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

Pour moi, cela ne fonctionnait que lorsque j'ai ajouté la ligne de code suivante

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

Cela a fonctionné pour moi!

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

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

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

...

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

Vous pouvez sélectionner n'importe quelle option dans dropdown 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());
0
Arsman Ahmad

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()); 
});
0
jdnichollsc
$("#target").val(null);

a bien fonctionné en chrome

0
Krishna Murthy