Sujet Précédent Sujet Suivant

Trasnférer valeurs à select option

Fermé
Sinistrus Messages postés 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 - 3 avril 2017 à 11:55
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 - 4 avril 2017 à 16:00
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 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
3 avril 2017 à 12:11
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 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 17
3 avril 2017 à 12:58
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 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
3 avril 2017 à 14:16
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 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 17
3 avril 2017 à 15:31
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 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
4 avril 2017 à 09:39
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 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 17
4 avril 2017 à 12:02
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 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
4 avril 2017 à 14:06
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 1017 Date d'inscription mercredi 12 décembre 2007 Statut Membre Dernière intervention 6 juin 2023 17 > ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021
4 avril 2017 à 14:47
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 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
4 avril 2017 à 16:00
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

"Reboot and Select proper Boot Device"
Rodoxx -
Patrick -

5 réponses
Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
Option de connexion désactivé
Alice -
Navibot -

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

2 réponses
Empreinte digitale disparue
Stef -
Steph -

6 réponses