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

**Louprouge** · 18/02/2017, 22h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

que la ligne javascript suivante suffit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ABCIWEB** · 19/02/2017, 01h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Louprouge** · 19/02/2017, 08h59

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

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager