Syntaxe javascript et jquery pour obtenir la valeur d'un élément

Version imprimable

18/02/2017, 22h07
Louprouge

Syntaxe javascript et jquery pour obtenir la valeur d'un élément

Bonjour,

Je viens de passer du temps à écrire une fonction correcte qui me renvoi la valeur d'un élément <select>.
J'utilise jquery et je me sert beaucoup de w3school pour écrire mon code.

Pour récupérer la valeur d'un select, w3school me dit avec un élement select :

Code:

<select id="mySelect"> ... </select>

que la ligne javascript suivante suffit:

Code:

alert(document.getElementById("mySelect").value);

Partant de la, je me dis que la ligne suivante devrait fonctionner nickel chrome:

Code:

alert($('#mySelect').value)

Erreur, j'ai invariablement la réponse suivante : Undefined.

Par contre, j'obtiens le résultat escompté avec la ligne suivante:

Code:

alert($('#mySelect')[0].value)

Je ne m'explique pas la raison de ce [0]. J'ai toujours imaginé que $('#...') était l'équivalent jquery de document.getElementById("...")

- Qu'est-ce que j'ai mal compris ?
- Est-ce que passer par l'élément [0] est une façon correcte de travailler ?
- Existe-t-il une doc sur le tableau renvoyé par $('#...') ?

Merci pour vos éclaircissements

Salut,

C'est normal car jQuery crée un objet à partir de l'élément ciblé.

Donc oui tu as mal compris $('#...') n'est pas strictement l'équivalent jquery de document.getElementById("...").

Pour avoir strictement l'équivalent il faut faire $('#...')[0] ou $('#...').get(0). Ainsi tu pourras utiliser la méthode javascript "value" pour récupérer la valeur du select.

Mais tu peux aussi utiliser la méthode jQuery "val()" et l'appliquer directement sur l'objet pour récupérer cette valeur, c'est plus simple.

Conclusion, si tu utilises jQuery utilises de préférence les méthodes jQuery. Pour utiliser les méthodes javascript il faut s'assurer de travailler sur l'objet javascript et non pas sur l'objet jQuery.

Ainsi les trois codes ci-dessous sont tous fonctionnels et équivalents (à supposé que tu aies chargé jQuery)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <body> <select id="select1"> <option value="">Choisissez</option> <option value="1">1</option> <option value="2">2</option> </select> <select id="select2"> <option value="">Choisissez</option> <option value="1">1</option> <option value="2">2</option> </select> <select id="select3"> <option value="">Choisissez</option> <option value="1">1</option> <option value="2">2</option> </select> <script> $('#select1').on("change",function(){alert($(this).val())}); $('#select2').on("change",function(){alert($(this)[0].value)}); $('#select3').on("change",function(){alert($(this).get(0).value)}); </script> </body>
$(this) représente l'objet jQuery soit respectivement $('#select1'), $('#select2') et $('#select3') dans les trois lignes javascript.

19/02/2017, 08h59
Louprouge

Réponse complète et détaillée.
Merci beaucoup.