Sujet Précédent Sujet Suivant

Liste déroulante html >php

Résolu/Fermé
mika2413
Messages postés
19
Date d'inscription
dimanche 29 mai 2011
Statut
Membre
Dernière intervention
5 octobre 2011
 - 11 juin 2011 à 21:21
 zeghad - 1 mai 2014 à 19:53
Bonjour,

je suis entrain de créer une page avec un grand formulaire comprenant plusieurs inputs, dont certains avec liste déroulante.

Regardez l'input suivant:

Type de choix ? <select name="choix">
<option value="1">Choix 1</option>
<option value="2">Choix 2</option>
<option value="3">Choix 3</option>
<option value="4">Choix 4</option>
</select>
Le choix par défaut est le choix 1.

Plus bas, j'aimerais qu'à chaque choix sélectionné, je puisse afficher un nouvel input à mon formulaire, mais sans avoir besoin de cliquer sur valider, que cela se fasse "à la volée".
Genre si la personne clique pour dérouler la liste, et choisisse le choix n°3, instantanément un nouvel input apparait en rapport avec ce choix plus bas (mon formulaire comprenant plusieurs inputs, le bouton valider se trouve tout en bas, après cette condition que j'aimerai mettre en place).

Je ne sais pas si c'est possible de le faire avec des conditions en php :-s
Votre aide est la bienvenue!
Merci d'avance




4 réponses

Réponse 1 / 4
avion-f16
Messages postés
18740
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
23 mai 2022
 4 390
Modifié par avion-f16 le 11/06/2011 à 22:05
Salut,

« mais sans avoir besoin de cliquer »
La voilà la solution : Javascript

C'est assez simple à faire : pour chaque choix, tu crées un cadre (div) ayant comme id la valeur du choix auquel il correspond et contenant le champ et le texte.Voilà un exemple :
<label for="maque_id">Marque :</label>
<select name="marque" id="marque_id">
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
    <!-- ... -->
</select>

<div id="audi">
    <label for="audi_modele_id">Modèle :</label>
    <select name="audi_modele" id="audi_modele_id">
        <option value="a4">A4</option>
        <option value="rs6">RS6</option>
        <option value="r8">R8</option>
        <!-- ... ->
    </select>
</div>

<div id="bmw">
    <label for="bmw_modele_id">Modèle :</label>
    <select name="bmw_modele" id="bmw_modele_id">
        <option value="s3">Serie 3</option>
        <option value="s6">Serie 6</option>
        <option value="x5">X5</option>
        <!-- ... ->
    </select>
</div>


Ces cadres seront masqués à l'aide du CSS.
Sur la liste principale, lorsqu'on change d'option (onchange) :
- Masquer le div actuellement ouvert
- Récupérer la nouvelle valeur de la liste
- Récupérer l'élément ayant cette valeur comme id
- Changer la propriété CSS de cet élément.
La pensée mène le monde.
0
Réponse 2 / 4
mika2413
Messages postés
19
Date d'inscription
dimanche 29 mai 2011
Statut
Membre
Dernière intervention
5 octobre 2011
 1
11 juin 2011 à 21:43
Merci beaucoup pour cette réponse si rapide.
Oui j'ai cherché un peu et je me suis vite rendu compte que js était la meilleure solution.
Je teste ça et je reposte ;-)
0
Réponse 3 / 4
mika2413
Messages postés
19
Date d'inscription
dimanche 29 mai 2011
Statut
Membre
Dernière intervention
5 octobre 2011
 1
11 juin 2011 à 23:41
Bon, j'ai réussi, en tout cas merci beaucoup de m'avoir donné la méthode.
Je la poste pour les autres, ça peut toujours servir:

----------------------------------------------
Entre <head> et </head>
----------------------------------------------

<script language="javascript">
function changementType() {
var type = document.getElementById("id").value;
if (type == "liste_1") {
document.getElementById("1").style.display="block";
} else{
document.getElementById("1").style.display="none";
}
if (type == "liste_2"){
document.getElementById("2").style.display="block";
}else{
document.getElementById("2").style.display="none";
}

}
</script>




----------------------------------------------
Dans le <body>
----------------------------------------------

<select name="id" id="id" onchange="changementType();">
<option value="">Choisissez dans la liste</option>
<option value="liste_1">Titre 1</option>
<option value="liste_2">Titre 2</option>
</select>


<div id ="1" style="display:none">
Votre Texte <input type="text" name="nom_1" size="2"/>
Votre Texte<input type="text" name="nom_1_1" size="2"/>
</div>

<div id ="2" style="display:none">
Votre Texte<input type="text" name="nom_2" size="2"/>
Votre Texte<input type="text" name="nom_2_1" size="2"/>
</div>

Bien entendu, les formulaires dans les div sont à adapter en fonction des besoins de chacun ^^
0
Réponse 4 / 4
zeghad
1 mai 2014 à 19:53
mrc pour l explication, mais si d apres la selection d un choix de la premiere liste
d autre liste appartient avec plusieurs elements extraits a partir d une base de donnees et un autre choix effectues pour avoir d autre liste contenant des elements apartir du choix selectione: exp section--->chapitre----> article
0