utilisation de jquery pour sélectionner une option de liste déroulante

Je me demandais si il est possible d'obtenir jQuery pour sélectionner une option, dire le 4ème point, dans une boîte déroulante?

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

Je veux que l'utilisateur clique sur un lien, puis sélectionnez la boîte de changement de valeur, comme si l'utilisateur a sélectionné en cliquant sur l'option.

vos options ont une valeur?

InformationsquelleAutor dotty | 2011-02-01

172

Comment sur
```
$('select>option:eq(3)').attr('selected', true);
```
exemple à 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 à http://jsfiddle.net/gaby/CWvwn/1763/
- Parfait merci beaucoup.
- imo ce n'est pas le travail; l'état de sélection de l'option doit être déclenchée par l'évolution de l'état de l'sélectionne lui-même à la place 🙂
- selectElement.selectedIndex = index; est ce que signifie Valet.
- je comprends, mais selectedIndex ne peut pas être utilisé pour une sélection multiple lorsque multiple attribut est utilisé. Et la normale (html) de façon à définir les éléments sélectionnés est la selected attribut de la option éléments.
- La voie normale est en fait à l'ensemble de la selected de la propriété de chaque correspondant options élément de true (et éventuellement le reste de false explicitement). Plusieurs sélections sont assez méchant en fait 🙂
- (je pense que c'est ce que j'ai dit, trop)
- Il y a une différence subtile, mais cela dit, votre réponse n'a pas affaire à de multiples soit.
- il ne veut pas que l'OP n'en a pas besoin. J'ai été de répondre à votre commentaire, que "de l'omi, ce n'est pas le travail; l'état de sélection de l'option doit être déclenchée par l'évolution de l'état de l'sélectionne lui-même au lieu", et je suis en train de dire que ce concept ne pourrait pas faire face à toutes les utilisations d'un élément select. (si vous êtes en argumentant sur les spécifications du W3C, alors que c'est un autre problème, et heureux d'en discuter sur le W3C listes de diffusion)
- Désolé pour ça, je dois me rappeler de ne pas écrire un pied dans la bouche des commentaires lorsque je suis toujours en train de dormir 🙁 je ne savais pas que new Option() instanceof Node, donc en supposant .attr('selected') cartes à la propriété, il sera casher; bien sûr, l'argument pour l'utilisation de .selectedIndex tient toujours pour régulière des listes déroulantes 🙂
- Le problème est qu'il n'a pas le feu à un 'onchange' événement.
- Il n'est pas de déclenchement 'onchange' événement. Tous les hacks pour ça aussi??
- le onchange événement n'est jamais déclenchée lorsque la valeur est modifiée par programmation. Vous pouvez ajouter un .trigger('change') à la fin aussi de déclencher l'événement (bien que ce sera le feu quelle que soit la valeur qu'il a effectivement changé)
- J'ai couru dans un problème où la liste déroulante la valeur ne serait pas "visuellement" changer jusqu'à ce que j'ai effectué sur une .modifier() sur la cible. Cependant, depuis que j'ai eu un événement lié à la liste déroulante, il serait la cause de l'événement à déclencher. À l'aide de .prop('selected', true) a résolu le problème!
InformationsquelleAutor Gabriele Petrioli
140

La solution:
```
$("#element-id").val('the value of the option');
```
- Merci! Qui a fait le tour pour moi.
- il ne définit pas le selected option dans le code HTML.
- vous pouvez poster votre code
- Travail parfait..
InformationsquelleAutor Harold SOTA
48

HTML sélectionner les éléments ont une selectedIndex propriété qui peut être écrit dans le but de sélectionner une option particulière:
```
$('select').prop('selectedIndex', 3); //select 4th option
```
En utilisant un JavaScript ceci peut être réalisé par:
```
//use first select element
var el = document.getElementsByTagName('select')[0]; 
//assuming el is not null, select 4th option
el.selectedIndex = 3;
```
- Ce doit être la accepté de répondre à... Il ressemble à la sanest et la solution la plus propre...
- Le problème est qu'il n'a pas le feu à un 'onchange' événement.
- Ce qui se passe avec aucune des autres réponses, a démontré ici; si vous voulez un événement à feu, vous devez le faire manuellement.
- Est-il un peu plus? Le seul moyen que j'ai trouvé: var fireEvent = function(selectElement){ if(selectElement){ if ("fireEvent" dans selectElement){ selectElement.fireEvent("onchange"); } else { var evt = document.createEvent("HTMLEvents"); evt.initEvent("changement", false, true); selectElement.dispatchEvent(evt); } } }
- jQuery expose .trigger() pour cela, mais puisque vous êtes déjà le faire avec le code qu'il serait facile de les appeler également le changement de gestionnaires de vous-même.
InformationsquelleAutor Ja͢ck
22

La façon la plus simple est val(value) fonction:
```
$('select').val(2);
```
Et pour obtenir la valeur sélectionnée vous donner pas d'arguments:
```
$('select').val();
```
Aussi, si vous avez <option value="valueToSelect">...</option>, vous pouvez le faire:
```
$('select').val("valueToSelect");
```
DÉMO
- Également travaillé $('#SelectCtrlId').val('ValueToSelect');
InformationsquelleAutor Ionică Bizău
19

si vos options ont une valeur, vous pouvez le faire:
```
$('select').val("the-value-of-the-option-you-want-to-select");
```
", sélectionnez " serait l'id de votre sélectionner ou d'un sélecteur de classe. ou si il y a juste un select, vous pouvez utiliser la balise comme dans l'exemple.
- C'est exactement ce dont j'avais besoin. Merci.
InformationsquelleAutor Victor
18

Je voudrais faire de cette façon
```
 $("#idElement").val('optionValue').trigger('change');
```
- cela devrait être la réponse sélectionnée
- $("#idElement").val('optionValue').modifier() pourrait également travailler
InformationsquelleAutor franzisk
8

Utiliser le code ci-dessous si vous souhaitez sélectionner une option avec une valeur spécifique:
```
$('select>option[value="' + value + '"]').prop('selected', true);
```
- $('select').val(valeur); Pourquoi si grave? 😉
- L'répondu code autoriser les sélections multiples aussi.
InformationsquelleAutor nlareu
3

Je préfère nth-child() pour eq (), car il utilise une base de 1 indexation plutôt que basée sur 0, ce qui est un peu plus facile sur mon cerveau.
```
//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);
```
- Le "1-en fonction de l'indice" est mieux lorsque l'on manipule des choses avec des dates. Me sauve de beaucoup de problèmes. merci.
InformationsquelleAutor Lee D
3

Avec " élément habituellement, nous utilisons la valeur de l'attribut. Il sera plus facile de définir ensuite:
```
$('select').val('option-value');
```
InformationsquelleAutor Savaratkar
3

Essayez ceci:
```
$('#mySelectElement option')[0].selected = true;
```
Ce qui concerne les!

InformationsquelleAutor Nicolas Finelli

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

InformationsquelleAutor Mamun Rasid

réponse avec l'id:

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

InformationsquelleAutor Javad Masoumi

0
```
 $('select>option:eq(3)').attr('selected', 'selected');
```
Une mise en garde ici est de savoir si vous devez activer javascript pour regarder select/option de changement de l'événement, vous devez ajouter .trigger('change') de sorte que le code de devenir.
```
 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');
```
parce que seulement l'appel .attr('selected', 'selected') ne déclenche pas l'événement

InformationsquelleAutor kanitw

Vous devez vous connecter pour publier un commentaire.