Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Expert éminent
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    7 091
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 7 091
    Points : 9 866
    Points
    9 866

    Par défaut Les formulaires (partie 2) Comment ajouter des options dans une liste déroulante à partir d'une autre ?

    Comment ajouter des options dans une liste déroulante à partir d'une autre ?
    http://javascript.developpez.com/faq...js#SelectListe

    Voici la mise à jour proposée :
    • suppression des balises <table> dans le code HTML
    • suppression des styles en ligne des balises select
    • indentation du code HTML et JS
    • refonte complète du code JS : une fonction est utilisée au lieu de 2


    Comment ajouter des options dans une liste déroulante à partir d'une autre ?

    Voici le code javascript :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     
    // La fonction prend en paramètre l'id de la liste de départ et l'id de la liste d'arrivée
    function ajout(nomListeDep, nomListeArr)	
    {
    	var idx;
    	var listeDep, listeArr;
    	var op;
     
    	listeDep = document.getElementById(nomListeDep);
    	idx = listeDep.options.selectedIndex;
    	if (idx == 0)
    	{
    		alert("Sélectionnez une option");
    		return false;
    	}
     
    	// Ajout de l'option sélectionnée dans la liste d'arrivée
    	listeArr = document.getElementById(nomListeArr);
    	op = new Option(listeDep.options[idx].text, listeDep.options[idx].value, true);
    	listeArr.add(op);
     
    	// suppression de l'option cliquée dans la liste de départ
    	listeDep.options[idx] = null;	
    }

    voici le code HTML du formulaire
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <select name="depart" id="depart" size="5" ondblclick="ajout('depart','arrive')">
    	<option value="0">Double clic pour sélectionner un client</option>
    	<option value="1">Option 1</option>
    	<option value="2">Option 2</option>
    	<option value="3">Option 3</option>
    	<option value="4">Option 4</option>
    </select>
     
    <select name="arrive" id="arrive" size="5" ondblclick="ajout('arrive','depart')">
    	<option value="0">Double clic pour supprimer un client</option>
    </select>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 584
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 584
    Points : 33 205
    Points
    33 205

    Par défaut

    Bonjour,
    on pourrait faire plus rapide/simple via un appendChild qui déplacera l'option double cliquée.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function ajout(nomListeDep, nomListeArr)
    {
    	var idx;
    	var listeDep, listeArr;
    	var op;
     
    	listeDep = document.getElementById(nomListeDep);
    	idx = listeDep.options.selectedIndex;
    	if (idx == 0)
    	{
    		alert("Sélectionnez une option");
    		return false;
    	}
     
    	// Ajout de l'option sélectionnée dans la liste d'arrivée
    	listeArr = document.getElementById(nomListeArr);
    // plus utile	op = new Option(listeDep.options[idx].text, listeDep.options[idx].value, true);
    	// transfert d'un SELECT à l'autre
    	listeArr.appendChild(listeDep.options[idx]);
     
    	// suppression de l'option cliquée dans la liste de départ
    // plus utile	listeDep.options[idx] = null;
    }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [FAQ] Les formulaires (partie 2) : Comment soumettre un formulaire automatiquement ?
    Par Auteur dans le forum Contributions JavaScript / AJAX
    Réponses: 4
    Dernier message: 18/11/2013, 21h33
  2. Réponses: 2
    Dernier message: 21/06/2012, 13h51
  3. Réponses: 1
    Dernier message: 01/05/2010, 20h44
  4. Réponses: 1
    Dernier message: 26/06/2008, 18h59
  5. Réponses: 6
    Dernier message: 22/09/2006, 10h01

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo