Gestion de 2 select multiple - compatible ie & ff

Description

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 / Exemple :


<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>

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (BiBi FocK)