Affichage d'une div en fonction d'un select
michael.l
Messages postés
10
Date d'inscription
Statut
Membre
Dernière intervention
-
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je cherche une solution désespérement, j'ai passé 2 jours sur les moteurs de recherches et je n'ai rien trouvé .
J'explique :
J'ai un formulaire avec un select option pour une liste de pays généré par du code php/mysql :
Ma requête est la suivante : je cherche à afficher une div qui contient des options supplémentaires du formulaire en fonction du pays selectionné (Dans l'UE ou hors UE).
Le tout en JS, mais je n'arrive pas a faire le code JS.
sachant que ca devrais etre (je pense) en fonction de la valeur="" de l'option selectionner.
Pouvez-vous m'aidez SVP ?
je cherche une solution désespérement, j'ai passé 2 jours sur les moteurs de recherches et je n'ai rien trouvé .
J'explique :
J'ai un formulaire avec un select option pour une liste de pays généré par du code php/mysql :
<select name="country" id="countrySelect"> <?php // requête sql $sql = "SELECT * FROM pays;"; // on sélectionne toutes les entrées de la table $req=mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); //On affiche ces entrées while($data = mysql_fetch_assoc($req)) { if ($data['fr']=='France') // France est sélectionné par défaut print '<option value='.$data['code'].' selected="selected">'.$data['fr'].'</option>'; else print '<option value='.$data['code'].'>'.$data['fr'].'</option>'; } mysql_close(); // on ferme la connexion ?> </select>
Ma requête est la suivante : je cherche à afficher une div qui contient des options supplémentaires du formulaire en fonction du pays selectionné (Dans l'UE ou hors UE).
Le tout en JS, mais je n'arrive pas a faire le code JS.
sachant que ca devrais etre (je pense) en fonction de la valeur="" de l'option selectionner.
Pouvez-vous m'aidez SVP ?
A voir également:
- Affichage d'une div en fonction d'un select
- Fonction si et - Guide
- Affichage double ecran - Guide
- Windows 11 affichage classique - Guide
- Fonction miroir - Guide
- Problème affichage photo messenger - Forum Facebook Messenger
9 réponses
salut, une solution:
<script type="text/javascript"> function affiche_div(id_a_lire,id_a_afficher){ //on lit le select var valeur_choisie=document.getElementById(id_a_lire).value; //puis on teste(atention ce qui est renvoyé ici c'est $data['code'] if(valeur_choisie ! = ' code_france '){ //par exemple document.getElementById(id_a_afficher).style.display='block'; //on affiche le div }else{ document.getElementById(id_a_afficher).style.display='none'; //on cache div (car l'utilisateur peut revenir sur son choix) } } </script> <select name="country" id="countrySelect" onchange="affiche_div('countrySelect','div_a_afficher')"> <?php // requête sql $sql = "SELECT * FROM pays;"; // on sélectionne toutes les entrées de la table $req=mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); //On affiche ces entrées while($data = mysql_fetch_assoc($req)) { if ($data['fr']=='France'){ // France est sélectionné par défaut print '<option value='.$data['code'].' selected="selected">'.$data['fr'].'</option>'; }else{ print '<option value='.$data['code'].'>'.$data['fr'].'</option>'; } ///attention mets prend l'habitude de mettre toujours les {} car si tu dois rajouter une instruction un echo tu vas avoir des soucis } mysql_close(); // on ferme la connexion ?> </select> <div id="div_a_afficher" style="display:none"> contenu du div </div>
je test demain, si ca marche ( ce que je crois) un grand merci à toi, mais alors un grand grand merci ! :)
bon alors ... j'ai fais :
mais ca marche pas, ca n'affiche rien quand je clic sur Albanie dans le menu déroulant. la div si_etr ne s'affiche pas.
<script type="text/javascript"> function affiche_div(countrySelect,si_etr){ //on lit le select var Albanie=document.getElementById(countrySelect).value; //puis on teste(attention ce qui est renvoyé ici c'est $data['code'] if(Albanie ! = ' AL '){ //par exemple document.getElementById(si_etr).style.display='block'; //on affiche le div }else{ document.getElementById(si_etr).style.display='none'; //on cache div (car l'utilisateur peut revenir sur son choix) } } </script> <fieldset> <legend>Nationalité :</legend><p> <select name="country" id="countrySelect" onchange="affiche_div('countrySelect','si_etr')"> <?php // requête sql $sql = "SELECT * FROM pays;"; // on sélectionne toutes les entrées de la table $req=mysql_query($sql) or die('Erreur SQL !'.$sql.'<br>'.mysql_error()); //On affiche ces entrées while($data = mysql_fetch_assoc($req)) { if ($data['fr']=='France'){ // France est sélectionné par défaut print '<option value='.$data['code'].' selected="selected">'.$data['fr'].'</option>'; }else{ print '<option value='.$data['code'].'>'.$data['fr'].'</option>'; } } mysql_close(); // on ferme la connexion ?> </select> <div id="si_etr" style="display:none">options supplémentaire</div> </fieldset>
mais ca marche pas, ca n'affiche rien quand je clic sur Albanie dans le menu déroulant. la div si_etr ne s'affiche pas.
Bonjour,
ça c'est normal!
Car dans ta fonction javascript tu teste "Si Albanie est différent de AL affiche la div"
Or toi tu veux que la condition teste "Si Albanie est identique à AL affiche la div"
Donc :
Bien sûr, en admettant que le code de ce pays (Albanie) dans la table de ta bdd soit de cette forme => AL
Pour exemple, dans le fichier source de ton formulaire et dans le select, la syntaxe de l'option doit être sous cette syntaxe :
ça c'est normal!
Car dans ta fonction javascript tu teste "Si Albanie est différent de AL affiche la div"
Or toi tu veux que la condition teste "Si Albanie est identique à AL affiche la div"
Donc :
<script type="text/javascript"> function affiche_div(countrySelect, si_etr) { //on lit le select var Albanie=document.getElementById(countrySelect).value; //puis on teste(attention ce qui est renvoyé ici c'est $data['code'] if(Albanie == 'AL') {//par exemple document.getElementById(si_etr).style.display='block'; //on affiche le div } else { document.getElementById(si_etr).style.display='none'; //on cache div (car l'utilisateur peut revenir sur son choix) } } </script>
Bien sûr, en admettant que le code de ce pays (Albanie) dans la table de ta bdd soit de cette forme => AL
Pour exemple, dans le fichier source de ton formulaire et dans le select, la syntaxe de l'option doit être sous cette syntaxe :
.../... <option value="AL">Albanie</option> .../...
Pour plusieurs pays, une petite modification dans la fonction javascript.
Admettons que nous avons le Maroc et la Libye (oui c'est d'actualité!) donc nous avons dans les options AL, MA et LI par exemple :
Et ainsi de suite pour chaque pays soumis à l'apparition de la DIV
Admettons que nous avons le Maroc et la Libye (oui c'est d'actualité!) donc nous avons dans les options AL, MA et LI par exemple :
<script type="text/javascript"> function affiche_div(countrySelect, si_etr) { var pays=document.getElementById(countrySelect).value; if(pays == 'AL' || pays == 'MA' || pays == 'LI') { document.getElementById(si_etr).style.display='block'; //on affiche le div } else { document.getElementById(si_etr).style.display='none'; //on cache div (car l'utilisateur peut revenir sur son choix) } } </script>
Et ainsi de suite pour chaque pays soumis à l'apparition de la DIV
salut,
//on lit le select
var Albanie=document.getElementById(countrySelect).value;
//puis on teste(attention ce qui est renvoyé ici c'est $data['code']
if(Albanie == 'AL') {//par exemple
il ne faut pas mettre var Albanie car cela n'est pas cohérent si un autre pays sélectionné
il faut laisser comme j'avais mis:
et si tu veux mettre plusieurs pays avec un OU (qui se code ||)
if(valeur_choisie == ' AL ' || valeur_choisie == ' BE ' || valeur_choisie == ' GR ')
Par contre ça risque d'être un peu long, tu peux peut être tester la négative mais attention la condition est avec un AND (qui se code &&)
if(valeur_choisie != ' FR ' && valeur_choisie == ' LU ' && valeur_choisie == ' XX ')
bien sur dans ce cas il faut aussi inverser la commande affichage masquage
//on lit le select
var Albanie=document.getElementById(countrySelect).value;
//puis on teste(attention ce qui est renvoyé ici c'est $data['code']
if(Albanie == 'AL') {//par exemple
il ne faut pas mettre var Albanie car cela n'est pas cohérent si un autre pays sélectionné
il faut laisser comme j'avais mis:
//on lit le select var valeur_choisie=document.getElementById(id_a_lire).value; //puis on teste(atention ce qui est renvoyé ici c'est $data['code'] if(valeur_choisie == ' AL '){ //cas de l'Albalnie
et si tu veux mettre plusieurs pays avec un OU (qui se code ||)
if(valeur_choisie == ' AL ' || valeur_choisie == ' BE ' || valeur_choisie == ' GR ')
Par contre ça risque d'être un peu long, tu peux peut être tester la négative mais attention la condition est avec un AND (qui se code &&)
if(valeur_choisie != ' FR ' && valeur_choisie == ' LU ' && valeur_choisie == ' XX ')
bien sur dans ce cas il faut aussi inverser la commande affichage masquage
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bon voila mon code, qui fonctionne, je le poste pour les éventuels futur intéressés :
<script type="text/javascript"> function affiche_div(countrySelect, si_etr) { //on lit le select var pays=document.getElementById(countrySelect).value; // On affiche les options d'étranger si l'on est originaire d'un pays Hors U.E. //ce qui est renvoyé ici c'est $data['code'] if(pays == 'AT' || // Allemagne pays == 'AT' || // Autriche pays == 'BE' || // Belgique pays == 'BG' || // Bulgarie pays == 'CY' || // Chypre pays == 'DK' || // Danemark pays == 'ES' || // Espagne pays == 'EE' || // Estonie pays == 'FI' || // Finlande pays == 'FR' || // France pays == 'GR' || // Grèce pays == 'HU' || // Hongrie pays == 'IE' || // Irlande pays == 'IT' || // Italie pays == 'LV' || // Letonnie pays == 'LT' || // Lituanie pays == 'LU' || // Luxembourg pays == 'MT' || // Malte pays == 'NL' || // Pays-Bas pays == 'PL' || // Pologne pays == 'PT' || // Portugal pays == 'CZ' || // République tchèque pays == 'RO' || // Roumanie pays == 'GB' || // Royaume-Uni pays == 'SI' || // Slovénie pays == 'SK' || // Slovaquie pays == 'SE' || // Suède ) { document.getElementById(si_etr).style.display='none'; //on cache la div } else { document.getElementById(si_etr).style.display='block'; //on affiche la div } } </script>
une remarque:
if(pays == 'AT' || // Allemagne
pays == 'AT' || // Autriche
est ce normal même code pour les 2 pays?
document.getElementById(si_etr_numero_de_carte).disabled=true;
concernant ta question fais l'essai avec:
if(pays == 'AT' || // Allemagne
pays == 'AT' || // Autriche
est ce normal même code pour les 2 pays?
document.getElementById(si_etr_numero_de_carte).disabled=true;
concernant ta question fais l'essai avec:
document.getElementById(si_etr_numero_de_carte).disabled="disabled";
seconde question toujours suite à ce module :
lorsque je récupère les infos sql pour modifier le profil, je fais un
<?php echo($info_user->ville_de_naissance) ;?>
mais pour l'intégrer dans ce script j'ai pensé à :
if ($info_user->nationalite == "FR"
mais je me dit qu'il y as mieux que de faire des elseif pour tout les pays, il y aurais pas une row ou truc du genre à faire ?
lorsque je récupère les infos sql pour modifier le profil, je fais un
<?php echo($info_user->ville_de_naissance) ;?>
mais pour l'intégrer dans ce script j'ai pensé à :
if ($info_user->nationalite == "FR"
mais je me dit qu'il y as mieux que de faire des elseif pour tout les pays, il y aurais pas une row ou truc du genre à faire ?
Bonsoir,
mais je me dit qu'il y as mieux que de faire des elseif pour tout les pays, il y aurais pas une row ou truc du genre à faire ?
tu pourrait créer un array en javascript qui contient les pays concernés, par exemple:
et tester si pays sélectionné contenu dans cet array par appel à la fonction:
par contre en php il existe une fonction in_array() qui permet de tester si une valeur est contenue dans un array
mais je me dit qu'il y as mieux que de faire des elseif pour tout les pays, il y aurais pas une row ou truc du genre à faire ?
tu pourrait créer un array en javascript qui contient les pays concernés, par exemple:
var arr = new Array("AT", "BG"," BE", "XY", ..........);
et tester si pays sélectionné contenu dans cet array par appel à la fonction:
Array.prototype.inArray = function(val) { var l = this.length; for(var i = 0; i < l; i++) { if(this[i] == val) { return true; } } return false; }
par contre en php il existe une fonction in_array() qui permet de tester si une valeur est contenue dans un array