trier une listbox par ordre alpha.

trier une listbox par ordre alpha. - HTML/CSS - Programmation

Marsh Posté le 11-08-2006 à 12:02:09    

Bonjour,
 
Je code un peu en PHP, mais je ne connais pas le javascript.
J'ai créer une page avec 2 listbox d'après ce code javascript :
http://www.editeurjavascript.com/s [...] _3_561.php
J'ai modifié mon code pour alimenter la listbox 1 avec des données d'une base MySql, et par odre alphabétique :

Code :
  1. $selectmots="select * from motscles order by mots";


Je peux transférer mes éléments de la liste 1 vers la liste 2 et vice-versa sans problème.
 
Mais ce que je voudrais en plus, c'est que quand je transfere un élément de la liste 2 vers la liste 1, la liste 1 soit trier par ordre alphabétique.
Or là, il me met l'élément en bas de la liste 1.
J'essaye de placer "sort();" dans le javascript, mais ça ne marche pas, forcément.
 
Pouvez vous m'aider ?
Merci.

Reply

Marsh Posté le 11-08-2006 à 12:02:09   

Reply

Marsh Posté le 11-08-2006 à 13:09:08    

Qu'est ce que tu veux dire exactement par:

Citation :

Je peux transférer mes éléments de la liste 1 vers la liste 2 et vice-versa sans problème.


ton "transfert" de list1 à list2 tu le fais en js? avec ajout/suppression de noeud? ou alors c'est un bout de ton truc en php?

Reply

Marsh Posté le 11-08-2006 à 14:19:33    

oui je passe les éléments de la list1 à la list2 en javascript.
je me sers de php, juste pour aller chercher la liste des éléments sur ma base MySql.

Reply

Marsh Posté le 11-08-2006 à 14:31:11    

fais péter ton js ... [:spamafote]

Reply

Marsh Posté le 11-08-2006 à 14:58:47    

ok je fais tout péter. :jap:

Code :
  1. <html>
  2. <head><title>Test</title>
  3. <script language="Javascript">
  4. // Transfert une ligne de la liste Origine à la liste Destination
  5. function TransfertListe(idOrigine, idDestination)
  6. { var objOrigine = document.getElementById(idOrigine);
  7. var objDestination = document.getElementById(idDestination);
  8. if (objOrigine.options.selectedIndex<0) return false;
  9. if (VerifValeurDansListe(idDestination, objOrigine.options[objOrigine.options.selectedIndex].value, true)) return false;
  10. var ADeplacer = new Option(objOrigine.options[objOrigine.options.selectedIndex].text, objOrigine.options[objOrigine.options.selectedIndex].value);
  11. objDestination.options[objDestination.length]=ADeplacer;
  12. objOrigine.options[objOrigine.options.selectedIndex]=null;
  13. }
  15. // Vérifie la présence de Valeur dans IdListe
  16. function VerifValeurDansListe(IdListe, Valeur, blnAlerte) {
  17. var objListe = document.getElementById(IdListe);
  18. for (i=objListe.length-1;i>=0;i--)
  19. if (objListe.options[i].value == Valeur)
  20. {
  21.  if (blnAlerte) alert('Déjà présent.');
  22.  return true;
  23. }
  24. return false;
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <?
  30. //connection
  31. $sql_host="****";
  32. $sql_user="****";
  33. $sql_pass="*****";
  34. mysql_connect($sql_host,$sql_user,$sql_pass) or die ("DBMS Server Error" );
  35. mysql_select_db("DOCINFO" ) or die ("DBMS Database Error" );
  36. // chargement des mots-clés
  37. $selectmots="select * from motscles order by mots";
  38. $querymots=mysql_query($selectmots);
  39. $nbrelignesmots=mysql_num_rows($querymots);
  40. $i=0;
  41. ?>
  42. <select name="la_liste_1" id="la_liste_1" style="width:100px;" size=10 ondblclick="TransfertListe('la_liste_1','la_liste_2');" >
  43. <?
  44. //chargement mots clés
  45. while($i<$nbrelignesmots)
  46. {
  47.  $optionmot=mysql_result($querymots,$i,"mots" );
  48.  print "<option value=$i>$optionmot</option>";
  49.  $i++;
  50. }
  51. ?>
  52. </select>
  53. &nbsp;&nbsp;
  54. <select name="la_liste_2" id="la_liste_2" style="width:100px;" size=10 ondblclick="TransfertListe('la_liste_2','la_liste_1');" >
  55. </select>
  56. </body>
  57. </html>


 
c'est mon fichier complet.
avec des morceaux de js et php dedans.


Message édité par glabou le 11-08-2006 à 15:10:51
Reply

Marsh Posté le 11-08-2006 à 15:26:03    

Il suffit de modifier la fonction TransfertListe() de la manière suivante :

// Transfert une ligne de la liste Origine à la liste Destination
function TransfertListe(idOrigine, idDestination)
{ var objOrigine = document.getElementById(idOrigine);
 var objDestination = document.getElementById(idDestination);
 if (objOrigine.options.selectedIndex<0) return false;
 if (VerifValeurDansListe(idDestination, objOrigine.options[objOrigine.options.selectedIndex].value, true))
     return false;
 var ADeplacer = new Option(objOrigine.options[objOrigine.options.selectedIndex].text, objOrigine.options[objOrigine.options.selectedIndex].value);
 
 // Recherche la bonne position dans la listbox de destination
 var i;
 for (i = 0; i < objDestination.options.length; i++) {
  if (objDestination.options[i].text > ADeplacer.text)
   break;
 }
 
 // Décale vers le bas
 for (var j = objDestination.options.length - 1; j >= i; j--) {
  objDestination.options[j+1]=new Option(objDestination.options[j].text,objDestination.options[j].value);
 }
 
 // Insert l'option
 objDestination.options[i]=ADeplacer;
 
 // Supprime l'option de la listbox d'origine
 objOrigine.options[objOrigine.options.selectedIndex]=null;
}

Reply

Marsh Posté le 11-08-2006 à 15:35:16    

C'est ta ligne 11 qu'il faut modifier :)
La tu rajoutes "bêtement" en dernière position sur la liste.
Il va falloir que tu trouves en dessous entre quelles options tu dois placer celui que tu rajoutes.
Vu que le code que tu as utiliser ça risque de pas être evident.
Il aurait mieux valu tout faire avec du DOM :D un truc dans le genre

Code :
  1. function TransfertListe(idOrigine, idDestination){
  2.   var objOrigine = document.getElementById(idOrigine);
  3.   var objDestination = document.getElementById(idDestination);
  4.   if (objOrigine.options.selectedIndex<0) return false;
  5.   if (VerifValeurDansListe(idDestination, objOrigine.options[objOrigine.options.selectedIndex].value, true)) return false;
  7.   var selOpt = objOrigine.getElementsByTagName('option')[objOrigine.options.selectedIndex];
  8.   var optNodes = objDestination.getElementsByTagName('option');
  9.   var optPos = -1;
  10.   for(var i=0; i< optNodes.length; i++){
  11.     if ( optNodes[i].value > selOpt.value ){
  12.       optPos = i;
  13.       break;
  14.     }
  15.   }
  16.   if ( optPos == -1){
  17.     objDestination.appendChild(selOpt);
  18.   } else {
  19.     objDestination.insertBefore(selOpt, optNodes[optPos]);
  20.   }
  22. }


 
edit: p0wned mais moi j'ai tout récrit avec du DOM, et c'est plus zoli :o


Message édité par anapajari le 11-08-2006 à 15:36:06
Reply

Marsh Posté le 11-08-2006 à 16:28:51    

Merci beaucoup. Ca marche comme je le souhaitais.
J'ai essayé de comprendre.....mais je capte vraiment pas grand chose en javascript  :p  
Pour le DOM, euh tu me parle chinois. loool. mais c'est pas grave.
 
Ce qui m'embete c'est que si j'ai un problème occasionnel en js, je vais devoir repasser sur le forum. Et vu que j'ai trouvé un autre script js que je veux appliquer, ça risque d'être bientôt. lool
 
Anapajari : t'as pas un lien vers un bon tutorial d'apprentissage js ?
 
Bon we.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed