Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1691 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  enieme sujet sur onchange / ListBox

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

enieme sujet sur onchange / ListBox

n°1344244
bixibu
Ca ... c'est fait!
Posté le 11-04-2006 à 15:53:31  profilanswer
 

Salut ;)
 
Bon je craque, ca fait 2h que je lutte avec Javascript qui d'ailleurs devrais pas exister tellement c'est chiant  :o .. mais bon d'un autre coté j'en ai besoin :d
 
J'ai ce code :

Code :
  1. function aff_matos_on_off(){
  2.     if( document.forms.modif_infos_dossier.type_aide.options.value ==0)
  3.         document.getElementById("matos_on_off" ).className="aff_div";
  4.     else
  5.         document.getElementById("matos_on_off" ).className="cache_div";
  6. }


et

Code :
  1. <form name="modif_infos_dossier" class="form_profil" action="<? echo 'modif_dossier.php?infos_dossier='.$code_dossier.'&action=majdossier'; ?>" method="post">
  2.                          <label for="type_aide">Type d'aide :</label>
  3.                          <select name="type_aide"  size='1' onchange=aff_matos_on_off() />
  4.                                 <option value="titre" class="selec_rub" style="margin: 0px;">Selection d'un type d'aide</option>
  5.                                 <option value="0">blabla</option>
  6.                                 etc...
  7.                          </select><br class="clearall" />
  8.                          <div id='matos_on_off' class="cache_div">YAHOO</div>


 
Donc en gros: quand je clique sur l'option dont la valeur est égale a 0 ca m'affiche la div et un beau YAHOOO
 
Probleme : ca marche sous IE mais pas sous Firefox.. JS est bien activé partout, firefox execute du JS ailleurs mais la ca bloque.
 
Une idée? je pige pas :(
merci

mood
Publicité
Posté le 11-04-2006 à 15:53:31  profilanswer
 

n°1344265
anapajari
s/travail/glanding on hfr/gs;
Posté le 11-04-2006 à 16:10:18  profilanswer
 

C'est ton test avec le if qu'est n'importe quoi :o
Pour avoir la valeur de l'option selectionné, il faut utiliser selectedIndex, un truc dans le genre ( avec un id type_aide sur ton select):

Code :
  1. function aff_matos_on_off(){
  2.          var selNode= document.getElementById('type_aide');
  3.          alert(selNode);
  4.          if( selNode.options[selNode.selectedIndex].value ==0){
  5.              document.getElementById("matos_on_off" ).className="aff_div";
  6.          } else {
  7.              document.getElementById("matos_on_off" ).className="cache_div";
  8.          }
  9.       }


 
Par ailleurs les " autour de la fonction appelée dans le onchange ça coute rien ;)

n°1344279
bixibu
Ca ... c'est fait!
Posté le 11-04-2006 à 16:23:06  profilanswer
 

Merci de m'aider, c'est sympa..
 
Mais la je suis carrement démoralisé, j'ai une erreur "objet attendu" sous IE.
J'ai bien fait tout comme toi pourtant, j'ai meme pas l'alert
 
Je rend les armes

n°1344284
anapajari
s/travail/glanding on hfr/gs;
Posté le 11-04-2006 à 16:26:32  profilanswer
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.       function aff_matos_on_off(){
  9.          var selNode= document.getElementById('type_aide');
  10.          if( selNode.options[selNode.selectedIndex].value ==0){
  11. document.getElementById("matos_on_off" ).className="aff_div";
  12.          } else {
  13. document.getElementById("matos_on_off" ).className="cache_div";
  14.          }
  15.       }
  16.   </script>
  17.   <style type="text/css">
  18.   .cache_div{
  19.     display: none;
  20.   }
  21.   .aff_div{
  22.     display: block;
  23.   }
  24.   </style>
  25. </head>
  26. <body >
  27. <form name="modif_infos_dossier" class="form_profil" action="a.php" method="post">
  28.   <label for="type_aide">Type d'aide :</label>
  29.   <select name="type_aide" id="type_aide" size='1' onchange="aff_matos_on_off()" >
  30.          <option value="titre" class="selec_rub" style="margin: 0px;">Selection d'un type d'aide</option>
  31.          <option value="0">blabla</option>
  32.   </select>
  33.   <br class="clearall" />
  34.   <div id='matos_on_off' class="cache_div">YAHOO</div>
  35. </form>
  36. </body>
  37. </html>


 
edit: Ah oui et le / a la fin de ta balise d'ouverte de select ça suxxe!


Message édité par anapajari le 11-04-2006 à 16:27:56
n°1344290
bixibu
Ca ... c'est fait!
Posté le 11-04-2006 à 16:31:48  profilanswer
 

Ok Bon je me suis repris en main :d
 
Ta solution marche parfaitement sous IE, l'alert me donne un "[object]"
Par contre sous FF j'ai une alerte avec dedans : "null"
 
Pas cool :(
 
edit:que je clique sur la bonne option ou pas j'ai "null"
 
pour le /> du select, merci j'avais pas vu! C'est un scandale


Message édité par bixibu le 11-04-2006 à 16:33:55
n°1344294
bixibu
Ca ... c'est fait!
Posté le 11-04-2006 à 16:36:36  profilanswer
 

Hum.. en recopiant ton code dans un nouveaudoc, FF affiche parfaitement comme il faut..
 
Je vais regarder mon code de bout en bout pour trouver l'erreur :(

n°1344298
bixibu
Ca ... c'est fait!
Posté le 11-04-2006 à 16:41:05  profilanswer
 

Ok quel con, j'ai oublié le id=" dans mon select..
 
Ca marche nikel maintenant.. Tous ca pour ca
 
Meric pour ton coup de main encore une fois ;)

n°1344436
gatsu35
Blablaté par Harko
Posté le 11-04-2006 à 20:09:26  profilanswer
 

et pourquoi passer par le selected index alors que monselect.value marche ???

n°1344618
bixibu
Ca ... c'est fait!
Posté le 11-04-2006 à 23:51:22  profilanswer
 

Oui, c'est pareil, j'avais fait comme ca avant.
 
M'enfin ca marche, maintenant je dois alimenter une liste en fonction du clik sur option d'une autre list
Je connais la methode mais je vais en chier
 
en gros et normalement : je me suicide demain :d

n°1344733
bixibu
Ca ... c'est fait!
Posté le 12-04-2006 à 09:30:50  profilanswer
 

Salut ;)
 
J'ai une autre petite question :
 
Est il possible en Javascript de compter le nombre d'options qui compose un select?
J'ai besoin de ce nombre pour incrementer la valeur de size="" du select .
Si ca existe pas, je me debrouillerais en php+javascript
 
EDIT:
bon j'ai compter le nombre d'options que je créé avec ma boucle php et j'ai ensuite modifier la valeur size avec javascript :
document.getElementById('choix_matos').size = <? echo $i; ?>


Message édité par bixibu le 12-04-2006 à 09:37:48
mood
Publicité
Posté le 12-04-2006 à 09:30:50  profilanswer
 

n°1344747
anapajari
s/travail/glanding on hfr/gs;
Posté le 12-04-2006 à 09:44:31  profilanswer
 

gatsu35 a écrit :

et pourquoi passer par le selected index alors que monselect.value marche ???


Argh oui c'est vrai, c'est juste que j'ai tellement l'habitude de faire comme ça pour récuperer d'autres attributs sur les options que j'oublie que pour la valeur on peut faire si simplement...
 

bixibu a écrit :

M'enfin ca marche, maintenant je dois alimenter une liste en fonction du clik sur option d'une autre list
Je connais la methode mais je vais en chier
en gros et normalement : je me suicide demain :d


Utilise le DOM a fond et essaye de faire ça proprement...Un gros tu te fais une fonction qui génère tes options( et qui prend par exemple l'id du select visé et un array en params)

Code :
  1. function buildOptions(idSel, arOpt){
  2.   var selNode;
  3.   if ( (selNode = document.getElementById(idSel)) == undefined){
  4.     return false;
  5.   }
  6.   /*** on vide les options qui peuvent déjà être dans le select ***
  7.   *** la version propre ( si il n'y a pas d'optgroup dans le bouzin)
  8.   while(selNode.getElementsByTagName('option').length){
  9.     selNode.removeChild(selNode.lastChild);
  10.   }
  11.   ***
  12.   *** version rapide et bourrine: ***/
  13.   selNode.innerHTML = '';
  14.   /*** on ajoute les nouvelles options ***/
  15.   var optNode;
  16.   for(var i=0; i<arrOpt.length; i++){
  17.     optNode = document.createElement('option');
  18.     selNode.appendChild(optNode); /*** toujours faire l'appendChild avant de setter l'attribut value d'un option sinon IE se vautre comme une enorme merde, pourquoi? je sais pas ***/
  19.     optNode.setAttribute('value', arrOpt[i]); /***valeur retourné ***/
  20.     optNode.nodeValue = arrOpt[i]; /*** valeur affichée ***/
  21.   }
  22.   return true;
  23. }


Voilou un truc comme ça, bon c'est non testé mais l'idée y est!!!

n°1344769
bixibu
Ca ... c'est fait!
Posté le 12-04-2006 à 10:12:59  profilanswer
 

Wowowow lol. Toujours aussi efficace anapajari.  
 
En fait, j'ai un peu laissé tombé cette idée de liste qui en alimente une autre (mais ce que tu as posté, je m'en reservirais surement dans pas longtemps).
EN fait mon probleme est que je dois permettre a l'utilisateur de choisir un materiel qui fait partie d'une arborescence de type de materiel (Arbre de 2 sous catégorie max)
 
Je pensais donc faire selectionner a l'user la premiere catégorie via une listbox1.. qui affiche une autre listbox2 alimentée en fonction de listbox1 qui affiche cette fois les sous-catégorie de la catégorie
Puis cette listbox2 en appelerais ensuite une autre, avec cette fois les materiels eux meme! (seuls les matos de la cat et sous-cat precedemment renseigné bien sur) enfin!
 
Mais la je me suis tournée vers 1 seule grosse liste avec une taille fixe (pas les liste on clik et ca déroul mais la liste directement déroulé)
 
Pour l'instant une centaine de ligne sont affichés, ca passe.. Le plus gros prob c'est l'indentation des sous-cat sous IE.
 
Si vous voyez une meilleure soluce , je suis tout ouie :)
 
Merci :hello:


Message édité par bixibu le 12-04-2006 à 10:14:41
n°1344809
anapajari
s/travail/glanding on hfr/gs;
Posté le 12-04-2006 à 10:50:15  profilanswer
 

Perso j'aurais fait ça:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.   /*** param is a node which has been clicked ***/
  9.   function show(lnkNode){
  10.     var i;
  11.     /*** hiding all select***/
  12.     selNodes = document.getElementsByTagName('select');
  13.     for(i=0; i<selNodes.length; i++){
  14.       selNodes[i].className = "";
  15.     }
  16.     /*** hiding all parentNode.parentNode ul ***/
  17.     ulNodes=lnkNode.parentNode.parentNode.getElementsByTagName('ul');
  18.     for(i=0; i<ulNodes.length; i++){
  19.       ulNodes[i].className = "";
  20.     }
  21.     /*** showing lnk parentChild child ( either ul or select )***/
  22.     var sonsNode = lnkNode.parentNode.getElementsByTagName('*');
  23.     /*** first child is always lnk, so watching the second one ***/
  24.     sonsNode[1].className="disp";
  25.    
  26.     return false;
  27.   }
  28.   </script>
  29.   <style type="text/css">
  30.   ul{
  31.     display: none;
  32.   }
  33.   ul.disp{
  34.     display: block;
  35.   }
  36.   select{
  37.     display: none;
  38.   }
  39.   select.disp{
  40.     display: inline;
  41.   }
  42.   </style>
  43. </head>
  44. <body >
  45. <form name="modif_infos_dossier" class="form_profil" action="a.php" method="post">
  46.    <ul class="disp">
  47.      <li><a href="" onclick="return show(this)">Cat 1:</a>
  48.        <ul>
  49.          <li><a href="" onclick="return show(this)">Cat 1_1:</a>
  50.    <select>
  51.      <option>1_1_1</option>
  52.      <option>1_1_2</option>
  53.      <option>1_1_3</option>
  54.    </select>
  55.  </li>
  56.          <li><a href="" onclick="return show(this)">Cat 1_2:</a>
  57.    <select>
  58.      <option>1_2_1</option>
  59.      <option>1_2_2</option>
  60.    </select>
  61.  </li>
  62.        </ul>
  63.      </li>
  64.      <li><a href="" onclick="return show(this)">Cat 2:</a>
  65.        <ul>
  66.          <li><a href="" onclick="return show(this)">Cat 2_1:</a>
  67.    <select>
  68.      <option>2_1_1</option>
  69.      <option>2_1_2</option>
  70.      <option>2_1_3</option>
  71.    </select>
  72.  </li>
  73.          <li><a href="" onclick="return show(this)">Cat 2_2:</a>
  74.    <ul>
  75.              <li><a href="" onclick="return show(this)">Cat 2_2_1:</a>
  76.        <select>
  77.          <option>2_2_1_1</option>
  78.          <option>2_2_1_2</option>
  79.        </select>
  80.      </li>
  81.              <li><a href="" onclick="return show(this)">Cat 2_2_2:</a>
  82.        <select>
  83.          <option>2_2_2_1</option>
  84.          <option>2_2_2_2</option>
  85.        </select>
  86.      </li>
  87.    </ul>
  88.  </li>
  89.        </ul>
  90.      </li>
  91.    </ul>
  92. </form>
  93. </body>
  94. </html>


 
C'est super vite fait, il y a surement un ou deux bugs cachés mais ça doit pas être long... En plus c'est indépendant du niveau, si jamais tu as besoin tu peux en mettre autant que tu veux...

n°1344830
bixibu
Ca ... c'est fait!
Posté le 12-04-2006 à 11:03:59  profilanswer
 

Comment dire... C'est parfait!
 
Il m'aurait fallu 2 jours pour faire ca vu mon niveau en JS!
 
Merci Beaucoup !

n°1344850
anapajari
s/travail/glanding on hfr/gs;
Posté le 12-04-2006 à 11:20:29  profilanswer
 

bixibu a écrit :

Comment dire... C'est parfait!
Il m'aurait fallu 2 jours pour faire ca vu mon niveau en JS!
Merci Beaucoup !


Bin si tu regardes bien y'a rien de vraiment compliqué :o
Une fois que tu sais te promener dans les noeuds de ton document(et si celui-ci est correctement écrit) avec le DOM tu peux tout faire.

n°1344968
bixibu
Ca ... c'est fait!
Posté le 12-04-2006 à 14:08:52  profilanswer
 

Bon ;)
 
j'ai 2 probleme et 1 question :
 
Question:
J'ai 1 formulaire tout bete dont un champs texte qui se rempli en cliquant sur un bouton. Ce bouton ouvre une pop-UP. Dans cette pop-up un autre formulaire contenant une listbox.
 
J'aimerais savoir comment faire pour récupérer dans mon champs texte de la page principal la valeur de l' "option" que l'utilisateur a cliqué. POST? GET? ou carrement du Javascript pur et dur?
ps:la page principal peut etre réactualisée.
 
 
Probleme:
Concernant cette meme pop-up, son ouverture se déclenche parfaitement sous Mozilla mais pas sous IE (5.0)
Est-ce normal (IE trop vieu ?) :

Code :
  1. function aff_matos_on_off(){
  2.     if( document.getElementById('type_aide').value == 0){
  3.         window.open('choix_mat.php', 'Choix du matériel', 'width=500, height=400; top=100, left=100, toolbar=no, menubar=yes, location=yes, resizable=yes, scrollbars=yes, status=no');
  4.     }
  5. }


Si je vire les 2 derniers parametre ca marche par contre (window.open('choix_mat.php') ca c ok ) :/
 
 
Sinon, sous IE5 ton script bug a la ligne 25:
    sonsNode[1].className="disp";
IE me dit que le 1 n'est pas un objet :/
pourtant ca devrait etre OK non?
 
Ca devrait etre mes dernieres questions ^^

Message cité 1 fois
Message édité par bixibu le 12-04-2006 à 14:09:55
n°1344998
anapajari
s/travail/glanding on hfr/gs;
Posté le 12-04-2006 à 14:33:39  profilanswer
 

bixibu a écrit :


Question:
J'ai 1 formulaire tout bete dont un champs texte qui se rempli en cliquant sur un bouton. Ce bouton ouvre une pop-UP. Dans cette pop-up un autre formulaire contenant une listbox.
J'aimerais savoir comment faire pour récupérer dans mon champs texte de la page principal la valeur de l' "option" que l'utilisateur a cliqué. POST? GET? ou carrement du Javascript pur et dur?
ps:la page principal peut etre réactualisée.


Vu que tu es parti sur du js de partout autant l'utiliser/en profiter/en abuser !
Dans la page html du popup, tu créées une fonction:

Code :
  1. function setInputValue( obj, idInpText){
  2.   opener.document.getElementById(idInpText).value = obj.value;
  3.   /*** tu peux rajouter une fermeture automatique de la fenetre si tu as envie ***/
  4. }


Et sur le select en question tu fais:

Code :
  1. <select ... onchange="setInputValue(this, 'idDuChampsTexteViseDansLaPagePrincipale')">


Le "mot clé" à connaitre c'est opener, ça te permet d'acceder a la fenêtre ayant ouvert le pop-up dans lequel "tu es".
La fonction, tu peux t'en resservir ailleurs ci-besoin, il suffit juste de passer les bons paramètres.
note: code non testé comme d'hab, donc non garanti bug-proof
 

bixibu a écrit :


Probleme:
Concernant cette meme pop-up, son ouverture se déclenche parfaitement sous Mozilla mais pas sous IE (5.0)
Est-ce normal (IE trop vieu ?) :

Code :
  1. function aff_matos_on_off(){
  2.     if( document.getElementById('type_aide').value == 0){
  3.         window.open('choix_mat.php', 'Choix du matériel', 'width=500, height=400; top=100, left=100, toolbar=no, menubar=yes, location=yes, resizable=yes, scrollbars=yes, status=no');
  4.     }
  5. }


Si je vire les 2 derniers parametre ca marche par contre (window.open('choix_mat.php') ca c ok ) :/


Le deuxième paramètre est le "nom de ta fenêtre", en fait c'est trompeur parce que c'est le "nom de la variable qui te permet d'accèder à ta fenêtre", et les espaces dans les noms de variables s'pas top :o
Dans enleve juste les espaces.
 

bixibu a écrit :


Sinon, sous IE5 ton script bug a la ligne 25:
    sonsNode[1].className="disp";
IE me dit que le 1 n'est pas un objet :/
pourtant ca devrait etre OK non?


ça devait arriver... Le support du DOM sur IE5.5 est ... pas comme sur IE6 :o
Tu peux essayer de ruser en forçant la récupération du 1er UL ( qui manque dans un coin ;) ):

Code :
  1. var sonsNode = lnkNode.parentNode.getElementsByTagName('*');
  2. for( var j=0; j<sonsNode.length; j++){
  3.   if ( sonsNode[j].tagName == "UL" && sonsNode[j].className == "" ){
  4.     sonsNode[j].className = "disp";
  5.     /*** la tu peux meme sortir de la boucle en fait parce que "normalement" il ne peut en rester(enfin avoir) qu'un  ***/
  6.   }
  7. }


n°1345203
bixibu
Ca ... c'est fait!
Posté le 12-04-2006 à 16:18:42  profilanswer
 

Bon he ben je dois te remercier !
Tout marche parfaitement (sous mozilla :d) et j'y serais jamais arrivé seul (et dieu sais que google est mon meilleur ami)
 
Je présente mon site demain, il va y avoir des gloussements ^^
 
Bon sinon pour IE, j'ai le 5.0 sur ma machine, pas le 5.5 dont tu m'as parlé. Mon probleme vient il de la d'apres toi ?
 
Sinon, le javascript en fait, c'est vraiment.. jouissif!

Code :
  1. function setInputValue( obj, idInpText){
  2.            if( obj.value != 'titre'){
  3.                opener.document.getElementById(idInpText).innerHTML = obj.options[obj.selectedIndex].text;
  4.                opener.document.getElementById(idInpText).style.display = "block";
  5.                opener.document.getElementById("label_"+idInpText).style.display = "block";
  6.                window.close();
  7.             }
  8. }

j'suis trop fier :p
Le label de ma div , je peut le récupérer sans doute plus proprement mais bon...
 
Allez Merci Encore pour le temps que tu as passé à m'aider.
 

Citation :

/*** la tu peux meme sortir de la boucle en fait parce que "normalement" il ne peut en rester(enfin avoir) qu'un  ***/


 
Effectivement il ne m'en reste qu'un (de cheveu :d) et je sort de la boucle a 17h Alleluya


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  enieme sujet sur onchange / ListBox

 

Sujets relatifs
cocher automatiquement 1 checkbox en fonction des données d'1 listboxAfficher dans une TextBox en fonction d'une ListBox
[HTML/CSS/Javascript] Select et onchange[resolu] Listbox en paramètre d'une procédure
[Résolu] [Batch] [Newbies] Diverses questions au sujet du BatchEncoder son mail avec sujet
merci de maider au sujet d'une newsletter[Résolu] Probleme listbox + onclick
Au sujet de tout ce qui est inutilisé dans les .HLe Fameux sujet du PathFinder
Plus de sujets relatifs à : enieme sujet sur onchange / ListBox


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR