Discussion :

[naaje]

Bonsoir,

je cherche à simuler la sélection d'un élément dans un select sur une page extérieure, dont je n'ai pas de contrôle sur le contenu.

J'ai quelque chose comme:

Code html :

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

1
2
3
4
5
<select class="maClasse">
<option>Option 0</option>
<option>Option 1</option>
<option>Option 2</option>
</select>

J'ajoute un listener sur le select:

Code :

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

1
2
3
$("select.maClasse").change(function() {
alert("Ça fonctionne !");
});

Et je simule une selection de l'utilisateur:

Code :

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

$("select.maClasse").prop('selectedIndex',1).change();

Mon listener est bien exécuté, et le select est rempli avec l'option 1.

Seulement, sur cette page, lorsque l'utilisateur sélectionne un élément à la souris, cela entraîne des modifications sur la page.

Ces modifications n'ont pas lieu lorsque la sélection est simulée en JavaScript. Je n'ai que peu de détails sur le fonctionnement de cette page, auriez-vous une idée de ce qui peut clocher?

Comment pourrais-je simuler exactement la sélection via une souris en JavaScript? Pas de succès avec l'appel à .click() non plus.

Merci d'avance !

naaje

[naaje]

Hop, je me réponds à moi-même, je sais que ça servira à quelqu'un un jour !

jQuery ne génère pas les évènements exactement tels qu'ils sont générés suite à une action utilisateur, du coup il faut créer un évènement directement dans le DOM:

Code :

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

1
2
3
4
5
6
$("select.maClasse").prop('selectedIndex',1); // on positione sur la deuxieme option
 
var event = document.createEvent('HTMLEvents'); // creation d'un évènement HTML
event.initEvent('change', true, false); // evenement change, qui se propage et ne peut être annulé
 
$("select.maClasse")[0].dispatchEvent(evObj); // déclencher le traitement de l'evenement dans le select

@+