Partage

Simuler un clic sur un select

Sujet résolu

21 avril 2009 à 21:53:27

Bonjour à tous et désolée pour le titre pas très explicite :-°

,

En fait, j'ai trois select, un pour le jour, un pour le moi et un pour l'année ( c'est dans un moteur de recherche )
Je pense que ce que je recherche à faire est possible en javascript.

J'y arrive

:

J'aimerais que lorsque on déroule le select, on clique sur une date, le select du moi se déroule automatiquement pour choisir un moi, et une fois le moi cliqué, le select de l'année se déroule à son tour.

Arf ! Pas facile à expliquer :lol:

.

J'èspère que vous aurez compris en tout cas, et merci d'avance à ceux qui vont pouvoir m'apporter une aide

Timot

21 avril 2009 à 22:07:55

Je coirs qu'on peut simuler le click, mais c'est pas sur ?
Sinon, tu peux deja lui donner le focus, avec focus().

frdiard

21 avril 2009 à 22:17:40

Tu n'aurais pas un exemple avec une simulation de clic sur un select ? J'ai cherché mais je n'ai rien trouvé qui convenais.

Merci beaucoup !

Timot

21 avril 2009 à 22:33:07

En cherchant 2sec sur google ...

function click_me(element)
 {
      try
   {//pour ie
  document.getElementById(element).click();
   }catch(e)
   {//pour ff
    var evt = document.createEvent("MouseEvents"); // créer un évennement souris
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  // intiailser l'évennement déja crée par un click
    var cb = document.getElementById(element); // pointe sur l'élement
    cb.dispatchEvent(evt);  // envoyer l'évennement vers l'élement
   }
 }

frdiard

21 avril 2009 à 22:44:35

Merci j'ai essayé de l'adapter mais je ne connais que moyennement javascript donc j'ai du faire une erreur ! :euh:

<script type="text/javascript">
 function click_me("mois")
 {
      try
   {//pour ie
  document.getElementById("mois").click();
   }catch(e)
   {//pour ff
    var evt = document.createEvent("MouseEvents"); // créer un évennement souris
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  // intiailser l'évennement déja crée par un click
    var cb = document.getElementById("mois"); // pointe sur l'élement
    cb.dispatchEvent(evt);  // envoyer l'évennement vers l'élement
   }
 }
</script>
    </head>
    <body> 
  
<div id="body">
<form name="form-test" id="form-test" action="resultat.php" method="post">
            <input type="text" class="champ_texte" name="champ-texte" id="champ-texte" size="20" autocomplete="off" />
            <select class="select" name="select-par" onchange="afficherAutre();ta_fonction(this.value)" >
            <option value="motcle" selected="selected">Par mots clés</option>
            <option  value="titre">Par titre</option>
            <option  value="date">Par date</option>
      </select>
       <input type="submit"  class="bouton_valider_recherche" id="bouton-submit" />
       
      
<div id="date" style="display:none">
<span>Entre le :</span>
      <select class="select" id="jour" name="jour" onchange="click_me()">
     <?php 
	  $nombre = '1';
	  while ( $nombre <= 31 )
	  { 
     if ( $nombre < 10 )
          $nombre = '0'.$nombre;

     echo '<option value="'.$nombre.'" >'.$nombre.'</option><br>';
	 $nombre++;
	  }
	  ?>
      
      </select>
       <select class="select" id="mois" name="mois" >
      <?php 
	  $nombre = '1';
	  while ( $nombre <= 12 )
	  { 
	   if ( $nombre < 10 )
          $nombre = '0'.$nombre;
		  
     echo '<option value="'.$nombre.'" >'.$nombre.'</option><br>';
	 $nombre++;
	  }
	  ?>
      </select>

Merci !

cerium50

22 avril 2009 à 10:09:11

clic_me attends comme paramètre le prochain select

(tu peux les récupérer via document.getElementById

xavierm02

22 avril 2009 à 10:13:04

function click_me(element)
 {
      try
   {//pour ie
  document.getElementById(element).click();
   }catch(e)
   {//pour ff
    var evt = document.createEvent("MouseEvents"); // créer un évennement souris
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  // intiailser l'évennement déja crée par un click
    var cb = document.getElementById(element); // pointe sur l'élement
    cb.dispatchEvent(evt);  // envoyer l'évennement vers l'élement
   }
 }

Veut dire qu'il faut donner l'argument quand on appelle la fonction...

Exemple : click_me(document.getElementById('truc'));

frdiard

22 avril 2009 à 10:17:52

regarder mon code, c'est pourtant ce que j'ai fais ? le nom du select suivant est bien mis entre parenthèse, c'est ça ?

o_O

mais je n'arrive pas à le faire fonctionner !

Merci de votre aide !

xavierm02

22 avril 2009 à 10:20:28

Toi tu fous la merde en mettant une chaîne de caractère en argument.. alors que les arguments doivent être des variables...

frdiard

22 avril 2009 à 10:32:53

Comme ça ?

var element= 'mois';


function click_me(element)
 {
      try
   {//pour ie
  document.getElementById(element).click();
   }catch(e)
   {//pour ff
    var evt = document.createEvent("MouseEvents"); // créer un évennement souris
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  // intiailser l'évennement déja crée par un click
    var cb = document.getElementById(element); // pointe sur l'élement
    cb.dispatchEvent(evt);  // envoyer l'évennement vers l'élement
   }
 }

Sans succès

!

Merci beaucoup de votre aide en tout cas.

Golmote

22 avril 2009 à 12:12:41

Non, le code que Timot t'as donné est une fonction que tu n'as pas besoin de modifier, je crois...

Il faut que tu lui passes en paramètre l'id de ton select, en effet, mais lors de l'appel, et non pas dans la définition de la fonction.

(Je crois que tu as des bases de JS à revoir toi...)

Donc la fonction, tu la remets comme elle était, et lors du l'appel, tu passes le paramètre :

<select class="select" id="jour" name="jour" onchange="click_me('mois')">

frdiard

22 avril 2009 à 13:48:47

Je remet mon script avec toutes les modifications que tu ma dit de faire :

<script language="javascript">
function click_me(element)
 {
      try
   {//pour ie
  document.getElementById(element).click();
   }catch(e)
   {//pour ff
    var evt = document.createEvent("MouseEvents"); // créer un évennement souris
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  // intiailser l'évennement déja crée par un click
    var cb = document.getElementById(element); // pointe sur l'élement
    cb.dispatchEvent(evt);  // envoyer l'évennement vers l'élement
   }
 }

</script>
    </head>
    <body> 
  
<div id="body">
<form name="form-test" id="form-test" action="resultat.php" method="post">
            <input type="text" class="champ_texte" name="champ-texte" id="champ-texte" size="20" autocomplete="off" />
            <select class="select" name="select-par" onchange="afficherAutre();ta_fonction(this.value)" >
            <option value="motcle" selected="selected">Par mots clés</option>
            <option  value="titre">Par titre</option>
            <option  value="date">Par date</option>
      </select>
       <input type="submit"  class="bouton_valider_recherche" id="bouton-submit" />
       
      
<div id="date" style="display:none">
<span>Entre le :</span>
      <select class="select" id="jour" name="jour" onchange="click_me(document.getElementById('mois')); " >
     <?php 
	  $nombre = '1';
	  while ( $nombre <= 31 )
	  { 
     if ( $nombre < 10 )
          $nombre = '0'.$nombre;

     echo '<option value="'.$nombre.'" >'.$nombre.'</option><br>';
	 $nombre++;
	  }
	  ?>
      
      </select>
       <select class="select" id="mois" name="mois" >
      <?php 
	  $nombre = '1';
	  while ( $nombre <= 12 )
	  { 
	   if ( $nombre < 10 )
          $nombre = '0'.$nombre;
		  
     echo '<option value="'.$nombre.'" >'.$nombre.'</option><br>';
	 $nombre++;
	  }
	  ?>
      </select>

Malheureusement une fois le jour choisis il ne se passe rien

Merci encore une fois Golmote de t'intéresser à mon cas, comme tu l'a dis, il faut que je revois les bases de js

Golmote

22 avril 2009 à 13:54:51

T'es têtu comme un âne ma parole !

Regarde le code HTML que j'ai mis dans mon post précédent...

Le paramètre, c'est l'id de l'élément, pas l'élément en lui-même !

Grrr ! Ouvre les yeux, regarde le code, et essaie de le comprendre plutôt que d'agir à l'aveuglette comme un mouton !

>_<

Raah !

frdiard

22 avril 2009 à 14:13:10

Je fais ce que tu me dis jusque là, je n'agit pas comme un mouton !

Mais ça ne fonctionne toujours pas

( dans la ligne du select je m'étais trompé sur le forum au dessus mais chez moi elle était bien bonne

!

Merci !

<script language="javascript">
function click_me(element)
 {
      try
   {//pour ie
  document.getElementById(element).click();
   }catch(e)
   {//pour ff
    var evt = document.createEvent("MouseEvents"); // créer un évennement souris
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  // intiailser l'évennement déja crée par un click
    var cb = document.getElementById(element); // pointe sur l'élement
    cb.dispatchEvent(evt);  // envoyer l'évennement vers l'élement
   }
 }

</script>
    </head>
    <body> 
  
<div id="body">
<form name="form-test" id="form-test" action="resultat.php" method="post">
            <input type="text" class="champ_texte" name="champ-texte" id="champ-texte" size="20" autocomplete="off" />
            <select class="select" name="select-par" onchange="afficherAutre();ta_fonction(this.value)" >
            <option value="motcle" selected="selected">Par mots clés</option>
            <option  value="titre">Par titre</option>
            <option  value="date">Par date</option>
      </select>
       <input type="submit"  class="bouton_valider_recherche" id="bouton-submit" />
       
      
<div id="date" style="display:none">
<span>Entre le :</span>
    <select class="select" id="jour" name="jour" onchange="click_me('mois')">
     <?php 
	  $nombre = '1';
	  while ( $nombre <= 31 )
	  { 
     if ( $nombre < 10 )
          $nombre = '0'.$nombre;

     echo '<option value="'.$nombre.'" >'.$nombre.'</option><br>';
	 $nombre++;
	  }
	  ?>
      
      </select>

Golmote

22 avril 2009 à 14:19:24

Bon, après si ça marche pas, faut se plaindre à Timot hein, pas à moi... :-°

EDIT : Le code marche sur les boutons, mais pas sur les select apparemment

frdiard

22 avril 2009 à 14:30:06

Ouai, bon tant pis

merci quand même ! Je vais continuer à chercher

restimel

22 avril 2009 à 14:35:18

Mais j'ai une question ce que tu veux c'est propager l'événement (faire croire au navigateur qu'on a cliquer sur le select)? ou ouvrir la liste déroulante?

Car ce n'est pas la même chose. Pour le premier cas c'est le code qui a été donné (et il me semble que ça fonctionne sur un select)
pour le 2e, je ne suis pas sûr que ce soit possible...

Sinon il y a des contournements comme cette astuce par exemple.
Mais le mieux serait quand même de recréer soit même la liste sous le select (à la place d'utiliser le select lui-même) afin de le paramétrer comme on veut.

Golmote

22 avril 2009 à 14:59:04

Juste l'ouvrir...

Sympa l'astuce

frdiard

22 avril 2009 à 15:06:29

C'est exactement l'effet que je cherche qui est donné dans l'astuce, merci beaucoup !

Je vais essayé de l'adapter.

J'ai repri s exactement le modèle du code source du lien que tu m'a donné, je dois être maudit, mais ça ne fonctionne pas chez moi

! (si si je vous jure, javascript est activé chez moi

)

Voici mon script :

<script>
function next(elem,target){
	elem.size=1;
	if(target){
		target.size=target.length;
		target.focus();
	}
}

</script>
    </head>
    <body> 
  
<div id="body">
<form name="formtest" id="formtest" action="resultat.php" method="post">
            <input type="text" class="champ_texte" name="champ-texte" id="champ-texte" size="20" autocomplete="off" />
            <select class="select" name="select-par" onchange="afficherAutre();ta_fonction(this.value)" >
            <option value="motcle" selected="selected">Par mots clés</option>
            <option  value="titre">Par titre</option>
            <option  value="date">Par date</option>
      </select>
       <input type="submit"  class="bouton_valider_recherche" id="bouton-submit" />
<div id="date" style="display:none">
<span>Entre le :</span>
    <select class="select" id="jour" name="jour" onchange="next(this,this.formtest.mois)" onblur="this.size=1">
     <?php 
	  $nombre = '1';
	  while ( $nombre <= 31 )
	  { 
     if ( $nombre < 10 )
          $nombre = '0'.$nombre;

     echo '<option value="'.$nombre.'" >'.$nombre.'</option><br>';
	 $nombre++;
	  }
	  ?>
      
      </select>
       <select class="select" id="mois" name="mois" onchange="next(this,this.formtest.annees)" onblur="this.size=1">
      <?php 
	  $nombre = '1';
	  while ( $nombre <= 12 )
	  { 
	   if ( $nombre < 10 )
          $nombre = '0'.$nombre;
		  
     echo '<option value="'.$nombre.'" >'.$nombre.'</option><br>';
	 $nombre++;
	  }
	  ?>
      </select>
       <select class="select" id="annees" name="annees" onchange="next(this,'')" onblur="this.size=1">
      <?php 
	  $nombre = '2008';
	  while ( $nombre <= 2009 )
	  {
     echo '<option value="'.$nombre.'" >'.$nombre.'</option><br>';
	 $nombre++;
	  }
	  ?>
      </select>

Merci d'avance

frdiard

23 avril 2009 à 10:58:20

Quelqu'un pour me dire si mon code est correct ?

Merci

xavierm02

23 avril 2009 à 11:05:36

Ca marche ?

frdiard

23 avril 2009 à 11:12:45

Non justement, pourtant j'ai repris exactement le code source de cette page qui marche parfaitement !

http://b.mariat.free.fr/javascript/poc [...] ct_extend.htm

restimel

23 avril 2009 à 11:35:21

Tu as écrit ça:

next(this,this.formtest.annees)

c'est

next(this,this.form.annees)

qu'il faut écrire.
(Et idem pour les autres select)

le .form est un attribut de l'élément (qui indique le formulaire où se trouve l'élément) ce n'est pas le nom du formulaire.

C'est vrai que le code d'exemple est ambiguë.
J'ai modifié le code en ajoutant quelques commentaires.

frdiard

23 avril 2009 à 14:36:16

Merci beaucoup, ça fonctionne bien, enfin presque ...

Il y a un "bug" si on ne met pas le "float:left"

http://www.francoisdiard.free.fr/autocomplete-3-2.php => voir ici pour le bug, sélectionner date dans la premiere liste.

Vous dites que la valeur peut être diminué si on veut un scroll, quelle est la valeur a modifié ?

Merci de votre aide !

restimel

23 avril 2009 à 15:01:53

Maintenant c'est du CSS. Le but est de garder l'élément à la même position sans gêner la disposition des autres.
Si tu ne veux pas utiliser le float, tu peux utiliser position:absolute (je ne suis pas sûr que le relative soit suffisant pour ce problème) et placer ton élément correctement.

Malheureusement je ne suis pas toujours très à l'aise avec le CSS.
(en fait je crois que le float n'est pas non plus la bonne solution car il risque de 'pousser' les éléments qui sont dessous, mais là je l'avais fait rapidement pour montrer la faisabilité)

Sinon pour l'explication du scroll( ou non):
en fait elem.size (lorsque elem est un select) donne le nombre d'option visible. Donc lorsqu'il est à 1 il a le comportement habituel est s'il a une valeur plus grande il affiche une boite avec le nombre d'élément précisé et une barre de défilement sur le côté.
Dans l'exemple: target.size=target.length; dimensionne donc l'élément au nombre d'option qu'il possède. Si tu veux en afficher moins tu peux mettre une valeur fixe ou faire un calcul comme:

target.size=Math.min(target.length,10);

qui dimensionnera l'affichage à 10 options visible maximum.

frdiard

23 avril 2009 à 17:42:33

Merci beaucoup pour tes explications, j'ai finalement gardé les float avec des marges