Trasnférer valeurs à select option

Sinistrus Messages postés 1010 Date d'inscription   Statut Membre Dernière intervention   -  
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour à tous ! J4ai besoin de votre aide pour terminer un projet.

En fait, j'ai 6 listes déroulantes où je doit sélectionner une lettre par option.

Par exemple : 
select1 :
S
A
L
U
T
S
Réinitialiser


Lorsque je sélectionne "L" au select1, j'obtiens au select2 : 
S-A-U-T-S-Réinitialiser
et ainsi de suite jusqu'au select6 ou j'aurais la dernière lettre à choisir... : 
S-Réinitialiser

Et enfin, si je sélectionne dans n'importe quel select 
Réinitialiser
, tout se remet au point 0.

Pouvez-vous m'aider svp ?

Cordialement

2 réponses

Réponse 1 / 2
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
Salut,

Qu'est ce que tu as fait jusque là ?
On pourra te donner une solution toute fait, mais c'est vraiment pas ma façon de procéder :)
0
Sinistrus Messages postés 1010 Date d'inscription   Statut Membre Dernière intervention   17
 
Bonjour ThEBIShOp et merci de t'intéresser à mon problème.
Jusque là, tout ce que j’arrive à faire c'est de transférer les éléments du select1 à un autre... vu que je ne maitrise pas javascript, je ne sais pas vraiment où j'en suis.
J'ai essayé plusieurs tutos mais je trouves :
- Passer les élements d'un select à un autre
- Supprimer l'option choisie dans un select...

Bref, je n'arrives pas à trouver ce que je cherche :\
0
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
Je vais te dire comment moi je précèderais.

Je commencerais pas créer un tableau javascript recensant toutes les valeurs de base. Puis j'initalise le premier select avec toutes les valeurs.
Ensuite, à la sélection d'une valeur, j'initialise le 2ème select avec les valeurs de base moins la valeur du 1er select.
A la sélection d'une valeur d'une valeur dans le 2ème select, j'initialise le 3ème select avec les valeurs de base, moins les valeurs déjà sélectionnées.
Etc...

Tu peux améliorer le truc en désactivant tous les select au départ, sauf le 1er et en activant le select suivant dès que le précédent est sélectionné.

Pour récupérer les valeurs à initialiser à chaque fois, l'idéal est de créer une fonction gérant ça pour toi. Tu passes le tableau de base, puis le tableau des valeurs sélectionnées, et tu retournes la différence (il y a peut être même une fonction de base qui le fait)

Pour terminer, je ferai le tout en utilisant le jQuery, qui facilite grandement la manipulation d'éléments HTML.

Voilà voilà pour le principe.
0
Sinistrus Messages postés 1010 Date d'inscription   Statut Membre Dernière intervention   17
 
Merci pour ton aide. Voici ce que j'ai bidulé en cherchant de part et d'autre sur google, mais je suis bloqué... il ne fonctionne pas bien. Tu peux m'aider à corriger stp ? : 
<script>
function rechercheOption(element,value,action){
    var i=0,li=element.childNodes.length;
    if(!action && element.value==value){
        (element.firstElementChild||element.firstChild).selected=true;
    }
    while(i<li){
        if(element.childNodes[i].value==value){
            element.childNodes[i].style.display=action?"block":"none";
            return;
        }
        i++;
    }
}
 var oldValue1="1";

function changeLettre1(){
    var Lettre1=document.getElementById("Lettre1");
    var Lettre2=document.getElementById("Lettre2");
    var Lettre3=document.getElementById("Lettre3");
    var Lettre4=document.getElementById("Lettre4");
    var Lettre5=document.getElementById("Lettre5");
    var Lettre6=document.getElementById("Lettre6");
	
    rechercheOption(Lettre2,oldValue1,true);
    oldValue1=Lettre1.value;
    rechercheOption(Lettre2,oldValue1,false);
}
</script>

<form name="Form" id="Form">
  
<select name="Lettre1" size="7" required id="Lettre1" style="width:100px;" onchange="changeLettre1()"><option value="" selected disabled>Orange</option>
<option value="S">S</option><option value="A">A</option><option value="L">L</option><option value="U">U</option><option value="T">T</option><option value="S">S</option></select>

<select name="Lettre2" size="7" required id="Lettre2" style="width:100px;" onchange="changeLettre1()"><option value="" selected disabled>Bleu</option>
<option value="S">S</option><option value="A">A</option><option value="L">L</option><option value="U">U</option><option value="T">T</option><option value="S">S</option></select>

<select name="Lettre3" size="7" required id="Lettre3" style="width:100px;" onchange="changeLettre1()"><option value="" selected disabled>Violet</option>
<option value="S">S</option><option value="A">A</option><option value="L">L</option><option value="U">U</option><option value="T">T</option><option value="S">S</option></select>

<select name="Lettre4" size="7" required id="Lettre4" style="width:100px;" onchange="changeLettre1()"><option value="" selected disabled>Jaune</option>
<option value="S">S</option><option value="A">A</option><option value="L">L</option><option value="U">U</option><option value="T">T</option><option value="S">S</option></select>

<select name="Lettre5" size="7" required id="Lettre5" style="width:100px;" onchange="changeLettre1()"><option value="" selected disabled>Vert</option>
<option value="S">S</option><option value="A">A</option><option value="L">L</option><option value="U">U</option><option value="T">T</option><option value="S">S</option></select>

<select name="Lettre6" size="7" required id="Lettre6" style="width:100px;" onchange="changeLettre1()"><option value="" selected disabled>Rose</option>
<option value="S">S</option><option value="A">A</option><option value="L">L</option><option value="U">U</option><option value="T">T</option><option value="S">S</option></select>

</form>
0
Réponse 2 / 2
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
Voilà comment j'aurais fait la chose...

Si tu as des questions, hésite pas 

<!DOCTYPE html>
<html>
    <head>
        <title>TEST JS</title>
    </head>
    <body>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="lettre1" class="col-sm-2 control-label">Orange</label>
                <div class="col-sm-10">
                    <select name="lettre1" id="lettre1" class="form-control" onclick="selectInitNext(1)">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="lettre2" class="col-sm-2 control-label">Bleu</label>
                <div class="col-sm-10">
                    <select name="lettre2" id="lettre2" class="form-control" onclick="selectInitNext(2)">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="lettre3" class="col-sm-2 control-label">Violet</label>
                <div class="col-sm-10">
                    <select name="lettre3" id="lettre3" class="form-control" onclick="selectInitNext(3)">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="lettre4" class="col-sm-2 control-label">Jaune</label>
                <div class="col-sm-10">
                    <select name="lettre4" id="lettre4" class="form-control" onclick="selectInitNext(4)">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="lettre5" class="col-sm-2 control-label">Vert</label>
                <div class="col-sm-10">
                    <select name="lettre5" id="lettre5" class="form-control" onclick="selectInitNext(5)">
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="lettre6" class="col-sm-2 control-label">Rose</label>
                <div class="col-sm-10">
                    <select name="lettre6" id="lettre6" class="form-control">
                    </select>
                </div>
            </div>
        </form>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script>
                        var values = [
                            'S',
                            'A',
                            'L',
                            'U',
                            'T',
                            'S'
                        ];
                        var selected_index = [];

                        function selectInit(num) {
                            var select = $('#lettre' + num);
                            var html = '<option value="">...</option>';
                            for (var i = 0; i < 6; i++) {
                                if (selected_index.indexOf(i) === -1) {
                                    html += '<option value="' + i + '">' + values[i] + '</option>';
                                }
                            }
                            select.html(html);
                        }

                        function selectInitNext(num) {
                            var val = $('#lettre' + num).val();
                            if (num >= 6 || val === '') {
                                return;
                            }
                            $('#lettre' + (num + 1)).prop('disabled', false);
                            selected_index[num] = parseInt(val);
                            selectInit(num + 1);
                        }

                        selectInit(1);
                        $('#lettre2').prop('disabled', true);
                        $('#lettre3').prop('disabled', true);
                        $('#lettre4').prop('disabled', true);
                        $('#lettre5').prop('disabled', true);
                        $('#lettre6').prop('disabled', true);
        </script>
    </body>
</html>
0
Sinistrus Messages postés 1010 Date d'inscription   Statut Membre Dernière intervention   17
 
Bonjour ThEBiShOp et merci encore pour ton code.
Je constate quelques erreurs mais globalement ça peut aller, lorsqu'on sélectionne la lettre de la première liste et qu'on l'a modifie par exemple, le reste ne prends plus la norme d'afficher le reste.
Aussi, le value affiche 1,2,3,4,5,6 au lieu de S,A,L,U,T,S
Penses tu pouvoir faire quelque chose ?

En tout cas merci pour ton aide !
0
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
Si tu prends comme value S,A,L,U,T,S, comment tu fais la distinction entre le 1er et S et le dernier ? :)
0
Sinistrus Messages postés 1010 Date d'inscription   Statut Membre Dernière intervention   17 > ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention  
 
Oh ! Ca ce n'est pas un soucis, SALUTS est un mot d'exemple, tout comme PAQUET ou tout autre mot de 6 lettres... :p
0
ThEBiShOp Messages postés 8411 Date d'inscription   Statut Contributeur Dernière intervention   1 566
 
Ce que je veux dire, c'est que dès que tu auras 2 fois la même lettre dans ton mot, ce qui arrive tout de même assez fréquemment dans la langue française, le script ne pourra pas fonctionner correctement.
0

Discussions similaires

Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
Select boot device première utilisation
eleagtte -
bazfile -

7 réponses
Please select boot device
Pauline Emmy -
nadellen -

5 réponses
Option de connexion est désactivé sur pc HP
franky95 -
georges97 -

2 réponses
"L'indice n'appartient à la sélection" + VBA
fleur.31 -
geosevda -

2 réponses