Ajouter un select selon un autre select

Miguelit0
Javascript

Bonjour,

Voila je rencontre un petit problème, j'aimerai ajouter un select en dessous du premier select de mon formulaire d'inscription, avec des options en rapport avec l'option que l'on va sélectionner dans le premier select.

En gros : l'utilisateur entre son mail, son mot de passe, la confirmation, choisi (financeur ou affilié) dans le premier select, et selon ce choix, ajouter un select en dessous de celui-ci, avec les options correspondantes au choix (financeur / affilié).

Je précise que je suis débutant avec Javascript et Jquery.

Merci d'avance pour votre précieuse aide.

6 réponses

TokaLazy

Salut,

Tu as deux choix:

  • Créer le(s) select(s) dont tu as besoin en javascript
  • Avoir le(s) select(s) déjà dans ton DOM

Dans les deux cas, tu ajoutes un écouteur d'évènement sur le premier select 

// Vanilla
var $select = document.querySelector('.mon_input')
$select.addEventListener('change', function () {
    // Script pour afficher ou créer le(s) select(s)
})

// jQuery
$('.mon_input').on('change', function () {
    // Script pour afficher ou créer le(s) select(s)
});
Miguelit0
Auteur

Salut,

Merci pour ta réponse, je vais utiliser les selects déjà présents dans le DOM, je vais effectuer quelques tests, si jamais, je repasse ici.

Bonne soirée :-)

Laznet

Et tu pourrais aller plus loin en utilisant le code de TokaLazy avec des if :

$('.mon_input').on('change', function () {
 var select_value = $(this option:selected').text()
    if(select_value == "la valeur que tu veux"){
    //Code pour afficher un select.
    }
});

Ce code est bien si t'as qu'un ou deux cas à traité... mais peut vite devenir problématique si t'en a plus.
Tu pourrais donc imaginer le même code avec un switch :D

TokaLazy

C'est quand même mieux de se baser sur la valeur du champ plutot que sur son texte (je trouve)

// select c'est mieux qu'input comme "selecteur jquery :D
$('.mon_select').change(function() {
    var _value = $(this).val()

    if (_value === 'expected') {
        // code
    }
})
Miguelit0
Auteur

Merci à vous, j'ai fais un petit code pour tester et ça donne ça. Il me restera plus qu'à trouver le moyen pour récupérer le choix dans une BDD :p .

 $('#animaux').on('change',function(){

        var _value = $(this).val();
        // console.log(_value);

        if (_value == 2) {
            // console.log("C'est un mammifère");
            $('.mammiferes').show();
            $('.reptiles').hide();
            }
        else if (_value == 3) {
            // console.log("C'est un reptile");
            $('.reptiles').show();
            $('.mammiferes').hide();

        }
    });
Laznet

" récupérer le choix dans une BDD :p . " Une petite requête ajax et hop :D