Affichage d'une div en fonction d'un select

Fermé
michael.l Messages postés 10 Date d'inscription dimanche 18 septembre 2011 Statut Membre Dernière intervention 6 juillet 2020 - 18 sept. 2011 à 18:58
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 25 sept. 2011 à 21:14
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 :
<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 ?

9 réponses

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
18 sept. 2011 à 21:30
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>				
0
michael.l Messages postés 10 Date d'inscription dimanche 18 septembre 2011 Statut Membre Dernière intervention 6 juillet 2020
18 sept. 2011 à 23:48
je test demain, si ca marche ( ce que je crois) un grand merci à toi, mais alors un grand grand merci ! :)
0
michael.l Messages postés 10 Date d'inscription dimanche 18 septembre 2011 Statut Membre Dernière intervention 6 juillet 2020
19 sept. 2011 à 12:27
bon alors ... j'ai fais :

<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.
0
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 :
<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>
.../...
0
michael.l Messages postés 10 Date d'inscription dimanche 18 septembre 2011 Statut Membre Dernière intervention 6 juillet 2020
19 sept. 2011 à 13:12
elle est exactement sous cette forme. Merci c'est super cool ^^ ;) ca fonctionne.
par contre si je veux faire plusieurs pays , je suis obligé de faire des elseif pour chaque pays ? ou il y as une ligne générique ?
0
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 :
<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
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
19 sept. 2011 à 13:42
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:
//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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
michael.l Messages postés 10 Date d'inscription dimanche 18 septembre 2011 Statut Membre Dernière intervention 6 juillet 2020
19 sept. 2011 à 13:57
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>
0
Après Suède il n'y a plus besoin du OU logique symbolisé par la double barre verticale ||
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>
0
michael.l Messages postés 10 Date d'inscription dimanche 18 septembre 2011 Statut Membre Dernière intervention 6 juillet 2020
19 sept. 2011 à 14:50
Ha oui, oupss...

par contre je peux faire comment pour désactiver les input ?
document.getElementById(si_etr_numero_de_carte).disabled=true;


un truc comme ca, ca marcherais ?
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 19/09/2011 à 15:42
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:

document.getElementById(si_etr_numero_de_carte).disabled="disabled";
0
michael.l Messages postés 10 Date d'inscription dimanche 18 septembre 2011 Statut Membre Dernière intervention 6 juillet 2020
19 sept. 2011 à 15:39
oupss aussi, DE pour allemagne.

j'ai modifié.
0
michael.l Messages postés 10 Date d'inscription dimanche 18 septembre 2011 Statut Membre Dernière intervention 6 juillet 2020
22 sept. 2011 à 17:47
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 ?
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
25 sept. 2011 à 21:14
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:

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
0