Comment utiliser jQuery pour sélectionner une option de liste déroulante?

157

Je me demandais s'il était possible d'obtenir jQuery pour sélectionner un <option>, disons le 4ème élément, dans une liste déroulante?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

Je veux que l'utilisateur clique sur un lien, puis que la <select>boîte change sa valeur, comme si l'utilisateur l'avait sélectionnée en cliquant sur le <option>.

— dingue
source

4

vos options ont-elles une valeur?

— Victor le

184

Que diriez-vous

$('select>option:eq(3)').attr('selected', true);

exemple sur http://www.jsfiddle.net/gaby/CWvwn/

pour les versions modernes de jquery, vous devez utiliser le .prop()au lieu de.attr()

$('select>option:eq(3)').prop('selected', true);

exemple sur http://jsfiddle.net/gaby/CWvwn/1763/

— Gabriele Petrioli
source

3

imo cela ne devrait même pas fonctionner; l'état sélectionné d'une option doit être déclenché en changeant l'état de la sélection elle-même à la place :)

— Ja͢ck

1

selectElement.selectedIndex = index;est ce que Jack veut dire.

— rlemon

@rlemon, je comprends, mais selectedIndexne peut pas être utilisé pour une sélection multiple lorsque l' multipleattribut est utilisé. Et la manière normale ( html ) de définir les éléments sélectionnés est l' selectedattribut des optionéléments.

— Gabriele Petrioli

@ GabyakaG.Petrioli La manière normale consiste en fait à définir la selectedpropriété de chaque optionsélément correspondant sur true(et éventuellement le reste sur falseexplicitement). Les sélections multiples sont assez méchantes en fait :)

— Ja͢ck

6

@sunnyiitkgp l' onchangeévénement n'est jamais déclenché lorsque la valeur est modifiée par programme. Vous pouvez ajouter un .trigger('change')à la fin pour déclencher également l'événement ( bien qu'il se déclenchera quelle que soit la valeur ayant réellement changé )

— Gabriele Petrioli

149

La solution:

$("#element-id").val('the value of the option');

— Harold Sota
source

2

il ne définit pas l' selectedoption dans le HTML.

— Ahmad hamza

54

Les éléments de sélection HTML ont une selectedIndexpropriété dans laquelle on peut écrire afin de sélectionner une option particulière:

$('select').prop('selectedIndex', 3); // select 4th option

En utilisant du JavaScript brut, cela peut être réalisé en:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

— Jack
source

7

Cela devrait être la réponse acceptée ... Cela ressemble à la solution la plus saine et la plus propre ...

— Denys Séguret

1

Le problème est qu'il ne déclenche pas d'événement «onchange».

— Guy Korland

2

@GuyKorland Cela se produit avec aucune des autres réponses non plus, démontrées ici ; si vous voulez qu'un événement se déclenche, vous devez le faire manuellement.

— Ja͢ck

1

@Jack Y a-t-il un chemin court? Le seul moyen que j'ai trouvé: var fireEvent = function (selectElement) {if (selectElement) {if ("fireEvent" in selectElement) {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("changement", faux, vrai); selectElement.dispatchEvent (evt); }}}

— Guy Korland

4

@GuyKorland jQuery expose .trigger()pour cela, mais comme vous le faites déjà avec du code, il serait facile d'appeler également les gestionnaires de changement vous-même.

— Ja͢ck

30

Je le ferais de cette façon

 $("#idElement").val('optionValue').trigger('change');

— Franzisk
source

3

cela devrait être la réponse choisie

— Uzumaki Naruto

2

$ ("# idElement"). val ('optionValue'). change () pourrait également fonctionner

— Ullullu

24

si vos options ont une valeur, vous pouvez le faire:

$('select').val("the-value-of-the-option-you-want-to-select");

«select» serait l'identifiant de votre sélection ou un sélecteur de classe. ou s'il n'y a qu'une seule sélection, vous pouvez utiliser la balise telle qu'elle est dans l'exemple.

— Victor
source

2

C'est exactement ce dont j'avais besoin. Merci.

— chapman84

23

Le moyen le plus simple est la val(value)fonction:

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

Et pour obtenir la valeur sélectionnée, vous ne donnez aucun argument:

$('select').val();

Aussi, si vous avez <option value="valueToSelect">...</option>, vous pouvez faire:

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

DEMO

— Ionică Bizău
source

A également fonctionné $ ('# SelectCtrlId'). Val ('ValueToSelect');

— Sai

9

Utilisez le code suivant si vous souhaitez sélectionner une option avec une valeur spécifique:

$('select>option[value="' + value + '"]').prop('selected', true);

— nlareu
source

$ ('sélectionner'). val (valeur); Pourquoi si sérieux? ;)

— Zeeshan

1

@Zee Le code répondu permet également des sélections multiples.

— Azghanvi

5

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

— Mamun Rasid
source

3

Je préfère nth-child () à eq () car il utilise une indexation basée sur 1 plutôt que basée sur 0, ce qui est légèrement plus facile pour mon cerveau.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

— Lee D
source

L '«index basé sur 1» est meilleur lors de la manipulation des choses avec des dates. Cela me sauve de beaucoup de problèmes. Merci.

— TCB13

3

Avec l'élément «», nous utilisons généralement l'attribut «valeur». Cela facilitera ensuite le paramétrage:

$('select').val('option-value');

— Savaratkar
source

3

Essaye ça:

$('#mySelectElement option')[0].selected = true;

Cordialement!

— Nicolas Finelli
source

2

réponse avec identifiant:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

— Javad Masoumi
source

1

 $('select>option:eq(3)').attr('selected', 'selected');

Une mise en garde ici est que si javascript surveille l'événement de changement de select / option, vous devez ajouter .trigger('change')pour que le code devienne.

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

car seul l'appel .attr('selected', 'selected')ne déclenche pas l'événement

— Kanitw
source