begin process at 2012 05 28 10:25:49
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > GESTION DE 2 SELECT MULTIPLE - COMPATIBLE IE & FF

GESTION DE 2 SELECT MULTIPLE - COMPATIBLE IE & FF


 Information sur la source

Note :
9,43 / 10 - par 7 personnes
9,43 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :select, multiple Niveau :Débutant Date de création :17/02/2006 Vu / téléchargé :18 710 / 12 345

Auteur : BiBi FocK

Ecrire un message privé
Commentaire sur cette source (30)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Voila ce code permet d'échanger les champs entre deux select(selection_champs()) et de gérer l'odre dans lequel ils sont affichés(priorite_champ).

De plus, lors de l'envoie du formulaire la fontion select_all() permet de vous envoyer le contenu des deux select sous forme de tableau que vous pourrez exploiter à votre guise.

Voilà, j'espère que cela servira. :)

P.s: j'ai testé ce code avec FF 1.5.0.1 et IE 6

Source

  • <script styles="text/javascript">
  • function selection_champs(champs,champs_affiche){
  • //on récupère l'endroit sélectionner dans le select source
  • selection = champs.selectedIndex;
  • if(selection != -1){
  • //on déselectionne tous les champs du select de destination où va être placer le(s) champ(s) selectionner
  • while(champs_affiche.selectedIndex != -1){
  • champs_affiche.options[champs_affiche.selectedIndex].selected = false;
  • }
  • while(champs.selectedIndex > -1){
  • if(champs.options[champs.selectedIndex].value == "Id_type_bien"){
  • champs.options[champs.selectedIndex] = null;
  • champs.form.Id_categorie_bien.options[0].select= true;
  • }else{
  • //on cherche la place de notre champ
  • for(place=0;place<champs_affiche.length;place++){
  • if(champs_affiche.options[place].text > champs.options[champs.selectedIndex].text){
  • break;
  • }
  • }
  • //on décale tous les champs
  • for(i=champs_affiche.length;i>place;i--){
  • champs_affiche.options[i] = new Option(champs_affiche.options[(i-1)].text,champs_affiche.options[(i-1)].value);
  • }
  • //on insère le champ selectionner
  • champs_affiche.options[place] = new Option(champs.options[champs.selectedIndex].text,champs.options[champs.selectedIndex].value);
  • champs.options[champs.selectedIndex] = null;
  • champs_affiche.options[place].selected = true;
  • }
  • }
  • if(champs.length > 0){
  • if(selection >= champs.length ){
  • selection = champs.length-1;
  • }
  • champs.options[selection].selected = true;
  • }
  • }
  • }
  • function select_all(frm){
  • for(i=0;i<frm.liste_champs.length;i++){
  • frm.liste_champs.options[i].selected = true;
  • }
  • frm.liste_champs.name = "liste_champs[]";
  • for(i=0;i<frm.selection.length;i++){
  • frm.selection.options[i].selected = true;
  • }
  • frm.selection.name = "selection[]";
  • }
  • function priorite_champ(selection,mode){
  • if(selection.length < 2 ){return;}
  • old_place = selection.selectedIndex;
  • if(mode == 'up' && old_place > 0){
  • new_place = old_place-1;
  • }else if(mode == 'down' && old_place < selection.length-1){
  • new_place = old_place+1;
  • }
  • tmp = new Option(selection.options[new_place].text,selection.options[new_place].value);
  • selection.options[new_place] = new Option(selection.options[old_place].text,selection.options[old_place].value);
  • selection.options[old_place] = new Option(tmp.text,tmp.value);
  • selection.options[new_place].selected = true;
  • }
  • </script>
<script styles="text/javascript">
function selection_champs(champs,champs_affiche){
   //on récupère l'endroit sélectionner dans le select source
    selection = champs.selectedIndex;
    if(selection != -1){
        //on déselectionne tous les champs du select de destination où va être placer le(s) champ(s) selectionner
        while(champs_affiche.selectedIndex != -1){
            champs_affiche.options[champs_affiche.selectedIndex].selected = false;
        }

        while(champs.selectedIndex > -1){
            if(champs.options[champs.selectedIndex].value == "Id_type_bien"){
                champs.options[champs.selectedIndex] = null;
                champs.form.Id_categorie_bien.options[0].select= true;
            }else{
                //on cherche la place de notre champ
                for(place=0;place<champs_affiche.length;place++){
                    if(champs_affiche.options[place].text > champs.options[champs.selectedIndex].text){
                        break;
                    }
                }
                //on décale tous les champs
                for(i=champs_affiche.length;i>place;i--){
                    champs_affiche.options[i] = new Option(champs_affiche.options[(i-1)].text,champs_affiche.options[(i-1)].value);
                }

                //on insère le champ selectionner
                champs_affiche.options[place] = new Option(champs.options[champs.selectedIndex].text,champs.options[champs.selectedIndex].value);
                champs.options[champs.selectedIndex] = null;
                champs_affiche.options[place].selected = true;
            }
        }

        if(champs.length > 0){
            if(selection >= champs.length ){
                selection = champs.length-1;
            }
            champs.options[selection].selected = true;
        }
    }
}

function select_all(frm){
    for(i=0;i<frm.liste_champs.length;i++){
        frm.liste_champs.options[i].selected = true;
    }
    frm.liste_champs.name = "liste_champs[]";

    for(i=0;i<frm.selection.length;i++){
        frm.selection.options[i].selected = true;
    }
    frm.selection.name = "selection[]";
}

function priorite_champ(selection,mode){
    if(selection.length < 2 ){return;}
    old_place = selection.selectedIndex;
    if(mode == 'up' && old_place > 0){
        new_place = old_place-1;
    }else if(mode == 'down' && old_place < selection.length-1){
        new_place = old_place+1;
    }
    
    tmp = new Option(selection.options[new_place].text,selection.options[new_place].value);
    selection.options[new_place] = new Option(selection.options[old_place].text,selection.options[old_place].value);
    selection.options[old_place] = new Option(tmp.text,tmp.value);
    selection.options[new_place].selected = true;
}
</script>


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

 Sources en rapport avec celle ci

SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
OUTIL DE SÉLECTION par jdmcreator
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip KERNEL.JS : HÉRITAGE MULTIPLE ET POLYMORPHISME par Kimjoa
Source avec Zip Source avec une capture UPLOAD EN AJAX + FLASH (FANCY UPLOAD) par Vagners

Commentaires et avis

Commentaire de jojoloulou le 21/03/2006 18:57:43

ce code est bien fait,
mais, j'arrive pas a recuperer les valeur de "selection"
quand je fait $_POST['selection'](en php) j'ai simplement la derniere valeur!
si kkun peut m'aider c sympa
@+

Commentaire de BiBi FocK le 27/03/2006 10:09:02

Utilise la fonction select_all() juste avant d'envoyer ton formulaire.

Cette fonction permet de modifier le nom des select et de sélectionner tous les champs. Ainsi l'on peut récupérer le contenu des différents champs sous forme de tableau.

tcho

Commentaire de ark41 le 05/04/2006 15:19:13

Salut Bibi Fock,

Je n'arrive toujours pas à récupérer les données grâce au select_all() ...
Je pense que ma façon n'est pas la bonne. Voici la manière dont j'essai de récupérer le tableau "selection"

echo $_POST['selection[0]');

@+

Commentaire de BiBi FocK le 05/04/2006 18:28:16

Salut ARK41,

Normalement, si tout se passe correctement lors de l'envoie du formulaire lorsque tu fait un :
echo $_POST['selection']

tu devrais voir Array s'afficher.

Lorsque tu a un problème avec un tableau tu peux utiliser la fonction print_r()(ici print_r($_POST['selection']); ) pour visualiser le contenu de ton tableau.

Sinon, essai :

echo $_POST['selection'][0];

cela devrait marché un peu mieux ;).

tcho

Commentaire de cdamour le 09/04/2006 16:49:46

Salut à tous

Très bon script mais ne fonctionne pas correctement sous IE7.
Dans la liste de droite, les valeurs ne sont pas affichées.

Bonne journée

Commentaire de NewSky le 22/05/2006 17:09:20

pour ARK41, je sais pas si tu as réussi à récupérer les données de la liste. En tout cas, pour les autres, il faut nommer son contrôle avec des crochets :
<select name="ma_liste[]">
De cette façon, tu envoies bien un tableau de valeurs et non pas une seule variable.

Commentaire de NewSky le 22/05/2006 17:58:52

Oups, pardon, j'aurais mieu fais de tester avant de poster!!! Ce que j'ai dit précédement est totalement faux. Je vais réfléchier un peu plus!!! Encore désolé.

Commentaire de ranyounaa le 30/05/2006 14:17:33

svp,
ca fait longtemps ke je galere.
j ai deux listes. on peut basculer entre elles et ja sais pas comment recuperer les nouvelles valeurs de la lsite.
j'ai vu la fonction select_all mais j'ai pas su ou l ytiliser et kel parametres lui donner.
un peu d aide svp

Commentaire de ranyounaa le 30/05/2006 14:55:09

excusez, j aurai du voir l exemple.
mon pb, c'est ke mainant les champs que je recupere sont vide.
et ce ke kelkun aurait une idée???

Commentaire de ranyounaa le 30/05/2006 15:06:39

je viens d'utiliser la fonction print-r et voila le resultat  Array ( [0] => [1] => )
donc les champs sont vides

Commentaire de ranyounaa le 30/05/2006 15:26:37

ca va sembler bizarre; kan j enleve, les otions ne sont plus dans la selection.
kan j ajoute, je vois dans la liste les valeurs ajoutées mais elles ne sont pas envoyer avec le formulaire.
c normal??
un peu d'aide svp, j ai l impression de parler seule!!!

Commentaire de NewSky le 30/05/2006 19:00:37

Pour ma aprt, voilà comment j'ai fait :

lors de l'envoie du formulaire, je parcours la 2ème liste en créant pour chaque item trouvé un ckeckbox coché auquels je donne la valeur de l'option :

function chekbx(){
   nbr_item=document.mon_formulaire.mon_select.lenght;

   for(i=0;i<nbr_item;i++){
      value_item=document.mon_formulaire.mon_select.options[i].value;
      document.getElementById('mon_div').innerHTML+=<input type=\"checkbox\" name=\"my_list[]\" value=\""+value_item+"\" />";
   }
}

dans le html
<form ... onsubmit="chekbx">

<div id="my_div" style="display:none"></div>

</form>

--------------------------------------------------------------------------------------------

Voilà, c'est peut-être de la bidouille, mais ça fonctionne très bien.

Commentaire de NewSky le 30/05/2006 19:05:00

j'ai oublié queque chose d'important : lors de la création des chekbox, il ne faut surtout pas oublié de les créer cochés :

document.getElementById('mon_div').innerHTML+=<input type=\"checkbox\" name=\"my_list[]\" value=\""+value_item+"\" checked=\"checked\" />"

sinon, évidement, ça marche pas!!

Commentaire de ranyounaa le 30/05/2006 21:21:42

au lieu, de faire un chekbox, j'ai un autre code qui permet de basculer entre les deux listes, puis j'ai repris la fonction select_all et ca marche!!!
si jamais kelkun en a besoin, faites moi signe.
je pourrais pas mettre tout le code car mon select contient des acces à la base assez compliké, et ca me prendra du temps de tout separer.
bon courage et encore merci!!!!

Commentaire de BiBi FocK le 30/05/2006 21:26:11

ranyounaa,

Pour ton tableau vide, est-ce que tu as bien défini une valeur pour tes options??
(exemple: value="1")

Commentaire de mibolan le 28/11/2007 15:13:22

Bonjour bonjour,

Par rapport à la sélection multiple comment à partir ce votre code faire une présélection ?

Commentaire de BiBi FocK le 28/11/2007 15:36:31

Par présélection, tu entends: donner le focus au champs ou les placés dans la liste sélection??

- si tu parles de la liste sélection il te suffit de les déclarer à dans la liste de ton choix à l'intérieur de la page html ;)
- Pour leur donner le focus, de rajouter l'option selected lors de la déclaration des options qui t'intéressent

Commentaire de mibolan le 28/11/2007 16:38:48

Je parlais bien de les déclarer dans la liste de sélection (liste de droite). C'est fait et effectivement ça marche très bien comme ça... Je pensais que cela serait plus compliqué.
Merci en tout cas pour ce script qui me sert beaucoup !

Commentaire de ridhasag le 28/11/2007 21:49:46

Salut à tous

Très bon script, mais je ne parviens pas à récupérer les valeurs de "selection". en fait
j'ajoute un bouton pour recupérer les valeurs
le code est le suivant :
<input type="submit" name="Submit" onSubmit="return select_all(this.selection) value="Envoyer">

et puis dans la page destination j'écrit:
<?

$Col = $_POST['selection'];
print_r($Col);
        foreach($Col as $ss){
//affichage des valeurs sélectionnées
                echo "$ss <br>";}


?>

mais ça donne::
Array ( [0] => [1] => [2] => [3] => )
et donc le résultat est vide .
est ce que qcq a une idée?
Merci

Commentaire de BiBi FocK le 28/11/2007 22:02:58

As-tu bien définies les valeurs de tes options??

exemple:
<option value="1">test 1</option>

Commentaire de ridhasag le 28/11/2007 22:12:20

D'après ce que j'ai compris du script, les valeurs de la liste "selection" sont définies après une phase de selection

Commentaire de BiBi FocK le 28/11/2007 22:17:28

Si tes options ont été définies avec leur 'value' renseigné cela ne devrait pas pauser de problème...

Commentaire de ridhasag le 28/11/2007 22:19:08

Lors que j'ai définie des valeurs pour les options du select:"liste_champs" j'ai pu récupérer les valeurs
merci

Commentaire de mibolan le 26/12/2007 00:20:21

Et pour IE 7 pourquoi ça marche pas ?

Commentaire de scat le 10/04/2008 16:52:27 9/10

Nickel, c'est ce que je cherchais par flemme de le coder. Je n'ai pas rencontré de problèmes sous IE 7.
Merci.

Commentaire de djtale le 12/06/2008 22:06:57

Bonjour,

je voulais savoir conserver dans le select de gauche les éléments que l'on passe dans le select de droite..
Mo objectif est en fait de pouvoir mettre dans le select de droite plusieurs fois le même élément.

Merci bcp.

Commentaire de biologie20002000 le 03/08/2008 04:02:54

bonjour,
un bon script. moi ma question : est ce que c'est possible de conservé autrement dit de sauvgarder la selection même apres fermeture de la fenetre. comme si on fait un cookie sur la selection.
si quelqu'un à une idée ça va m'aidé dans mon select que je veux utiliser pour mon site.
merci

Commentaire de zerros le 10/12/2008 15:00:12

Bonjour,

J'ai un souci avec ce fonctionnement. J'ai un formulaire me permettant d'envoyer un certain nombre de champs à uns script php.
Le hic, c'est qu'ayant déjà un formulaire, il m'est inpossible d'imbriquer le formulaire de ce code dans mon formulaire existant.

N'étant pas fortiche en javascript, Je voudrai savoir comment dois-je proceder pour ajouter ces deux listes dans mon formulaire existant ?

J'espère que vous pourrez m'aider.

Commentaire de Dav_c le 08/01/2010 09:10:37 10/10

merci

Commentaire de tiflo7411 le 22/06/2011 12:33:42

Bonjour à tous !!

Vous voulez encore plus simple ? Je ne suis pas un expert, mais j'ai trouvé un truc pas tant mal ! (Je sais le dernier post date un peu... mais bon si ça peut aider certains...)

En fait, dans votre formulaire, au lieu d'avoir les lignes du <select> comme ceci '<option>Option 1</option>', préciser l'attribut value="", ce qui nous donne ==> '<option value="Option 1">Option 1</option>'. Et sans faire de checkbox en javascript ou quoi, quand vous lancer votre formulaire et que vous faites un print_r() de la liste, vous vous apercevrez qu'il vous affichera bien les value de votre select :)

Bonne journée et continuation à tous !

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Select All d'un select multiple [ par guiguimac ] bonjour,pour sélectionner tous les éléments d'un select multiple, je fais une boucle et je les passe tous à selected ... mais comme j'en ai bcp le rés Evènement sur un select multiple [ par Dionysos33 ] Bonjour à tous,Y a t-il un moyen direct d'avoir l'index du dernier item sélectionné par l'utilisateur dans un select multiple ?Merci Positionner la scroll bar dans un select multiple [ par RoroLaDechire ] Bonjour,je souhaiterais que la première option sélectionnée dans un select multiple, lors d'un rechargement de la page, soit au milieu du select, et n Focus sur un élément dans une liste Select multiple [ par Barbichou ] Bonjour.J'ai une liste à choix multiple dans une page HTML, avec certains des éléments déjà sélectionnés, et triés dans un certain ordre. Le pb est de verif d'un select multiple... un coup de pouce svp ;-) [ par nougitch ] Bonjour, Je voudrais v&#233;rifier que quelque chose a &#233;t&#233; selctionn&#233; dans mon select multiple. Au d&#233;part, j'en avais fait un si slectmultiple et infobulle [ par goulouk ] Bonjour,Je vous expose mon prolblème :J'ai un select multiple et je voudrais qu'au passage de la sourie sur une des options du select avoir une info b Récupération des valeurs d'un select multiple [ par malalam ] Hello, une petite question : j'ai un select &#224; choix multiples. Je voudrais, avant validation du formulaire, r&#233;cup&#233;rer les valeurs s&#2 Select multiple récupèration des options [ par bruno9173 ] Bonsoir, Je débute en javascript et je bloque depuis une journée sur la récupération dans une variable de l'ensemble des valeurs même non sélectionné Dernier selection dans select multiple [ par guiguimac ] bonjour,j'aimerai savoir comment récupérer le dernier élément sélectionné dans un select multiple ...merci d'avance ! Netscape, Select et Tableau [ par bavmorda ] Bonjour,J'ai une liste (select) dans un tableau (pour des soucis de mise en forme). Ce Select contient 1 item à l'ouverture de la page. Le contenu est


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,998 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales