Afficher div en fonction du <select>

par **BaLiSTiK** » 07 juil. 2008, 16:24

Oké, alors je fignole une page d'inscription pour un site qui servira d'aide pour des agriculteurs.
Sur ce formulaire, en premier lieu, la personne doit renseigner son métier, qui sont de 3 différents :
Sica (id : 3) qui sont des Societés d'Iterêts Collectif Agricol
Exploitant (id : 4) : gerant d'une exploitation agricole
Ouvrier agricole (id : 5) qui travaille au sein d'une exploitation.

Si il choisi SICA, le formulaire doit afficher dans une balise <select> la liste des SICA enregistrées dans la base, si il opte pour Exploitant, il choisit la SICA auquel il est affilié ainsi que le numero de son exploitation (que l on appelle numero de pacage).
Pour ça que j ai créé deux <div> qui sont par defaut masqués et qui s'affiche en fonction du choix de l'utilisateur.

Code javascript:

Code : Tout sélectionner

	<script type="text/javascript">
		function changeDiv(numOption){
		
		 var expl = document.getElementById("div_expl");
		 var sica = document.getElementById("div_sica");
		 //alert("Num de l option "+numOption);
		
		  // var numOption = this.value; // this correspond ici au select
		   //EXPLIUTATIOn
		   if(numOption == 4){
			  expl.style.display = "block";
			  sica.style.display = "none"   
		   }
		   //SICA
		   if(numOption == 3) { 
		   	expl.style.display = "none";
		   	sica.style.display = "block";     
		   }
		   /*else{
			  sica.style.display = "none";
			  expl.style.display = "none";	   
		   }*/
		}
	</script>

Sélection du métier

<p class="consignes-form">S&eacute;lectionnez votre m&eacute;tier</p>
<?php
	$sCodeInput = '<select size="1" name="num_level" id="num_level" style="max-width: 200px;" onchange="changeDiv(this.value);"';
	if (!$oInscription->m_bModeEdition  ){
		$sCodeInput .= 'disabled="disabled"';
	}	
	$sCodeInput .= '>';
	$sCodeInput .= '<option>S&eacute;lectionner</option>';
	foreach ($oInscription->m_aListeLevel as $sCle => $sValeur) {
		$sCodeOption = '<option';
		$sCodeOption .= ' style="width: 100px;" value=' . $sCle . '>';
		$sCodeOption .= $sValeur['level'].'</option>';
		$sCodeInput .= $sCodeOption;
	} 										
	$sCodeInput .= '</select>';
echo $sCodeInput;										
?>
<br />

Si l'user opte pour Exploitation :

<div id="expl" style="display:none;">
<p class="consignes-form">Si vous &ecirc;tes exploitant :</p>
<p class="consignes-form">S&eacute;lectionnez votre SICA</p>
<?php
	$sCodeInput = '<select name="sica" id="sica" class="marge-combo" style="max-width:200px;"';
	if (!$oInscription->m_bModeEdition  ){
		$sCodeInput .= 'disabled="disabled"';
	}	
						
	$sCodeInput .= '>';
	$sCodeInput .=	'<option value="1">S&eacute;lectionner</option>';
	foreach ($oInscription->m_aListeSica as $sCle => $sValeur) {
																	
		$sCodeOption = '<option';
		$sCodeOption .= ' style="width: 100px;" value="'.$sCle.'"'; 
		$sCodeOption .= '>';
		$sCodeOption .= $sValeur['nom_sica'].'</option>';
		$sCodeInput .= $sCodeOption;
	} 
	$sCodeInput .= '</select>';
	echo $sCodeInput;									?>												
<p class="consignes-form">Selectionnez le num&eacute;ro de pacage de votre exploitation</p>
<?php														
	$sCodeInput = '<input type="text" id="num_pac" name="num_pac" maxlength="50" size="25" class="taille-champ-saisie"';
	if (!$oInscription->m_bModeEdition){
		$sCodeInput .= 'disabled="disabled"';
	}
	$sCodeInput .= '>';
	echo $sCodeInput;									?>												
</div>

Et dans le cas ou il opte pour SICA :

<div id="sica" style="display:none;">
<p class="consignes-form">Si representez une SICA :</p>
<p class="consignes-form">S&eacute;lectionnez votre SICA</p>
<?php
	$sCodeInput = '<select name="sica" id="sica" class="marge-combo" style="max-width: 200px;"';
	if (!$oInscription->m_bModeEdition  ){
		$sCodeInput .= 'disabled="disabled"';
	}	
						
	$sCodeInput .= '>';
	$sCodeInput .=	'<option value="1">S&eacute;lectionner</option>';
	foreach ($oInscription->m_aListeSica as $sCle => $sValeur) {
																	
		$sCodeOption = '<option';
		$sCodeOption .= ' style="width: 100px;" value="'.$sCle.'"'; 
		$sCodeOption .= '>';
		$sCodeOption .= $sValeur['nom_sica'].'</option>';
		$sCodeInput .= $sCodeOption;
	} 
	$sCodeInput .= '</select>';
	echo $sCodeInput;
?>	
</div>

Le probleme venais apparement du nommage des <div>, il y avait conflit entre le nom du div sica (renommé en div_sica et les balises select qui s'appele aussi sica.

Probleme résolu (pendant la redaction du post qui plus est !!)
Merci bcp

par **guilt92** » 07 juil. 2008, 09:32

Poste ton code actuel stp et si jamais tu peux expliquer un tout petit plus en détail le problème...

par **BaLiSTiK** » 04 juil. 2008, 17:21

Oké c est rectifié, on avance...maintenant je na ffiche que le <div> correspondant au champs Exploitatation, alors que celui correspondant au champs SICA ne s'affiche plus...comment ne pas s'arracher les cheveux à qq mn du Week-end

par **Shrell** » 04 juil. 2008, 17:13

non non : pas de = simple, c'est un affectation, quel que soit le type de données
pour tester, c'est toujours ==

par **guilt92** » 04 juil. 2008, 17:13

Dailleurs, dans les if, ce serait mieux de mettre un simple = vu que ce sont des integer et nn des chaines de caractère ?

Surtout pas !

L'opérateur = est une affectation (x=1 donne la valeur 1 à x) alors que == est une comparaison.

Si tu fais if(x=3) ca sera toujours vrai car ca donne la valeur 3 à x et c'est tout, alors que if(x==3) c'est vrai si x vaut 3 c'est faux sinon...

La différence entre comparer des entiers et une chaine est de faire

if(x==3) //x est un entier
if(x=="3") //x est une chaine

C'est surement a cause de ca que tu code ne marche pas, car quelle que soit la valeur de numOption tu fais un numOption=4 donc tu donnes la valeur 4 à numOption...

par **BaLiSTiK** » 04 juil. 2008, 17:01

Merci

j'ai donc changé de cette façon :

le js :

Code : Tout sélectionner

		function changeDiv(numOption){
		
		 var expl = document.getElementById("expl");
		 var sica = document.getElementById("sica");
		
		  // var numOption = this.value; // this correspond ici au select
		   if(numOption = 4){
		   
			  expl.style.display = "block";
			  sica.style.display = "none"
			   
		   }
		   if(numOption = 3) {
		   
			  sica.style.display = "block";
			  expl.style.display = "none";
			   
		   }
		   else{
		   
			  sica.style.display = "none";
			  expl.style.display = "none";
			   
		   }
		}

Dailleurs, dans les if, ce serait mieux de mettre un simple = vu que ce sont des integer et nn des chaines de caractère ?

le select :

$sCodeInput = '<select size="1" name="num_level" id="num_level" style="max-width: 200px;" onchange="changeDiv(this.value);"';
if (!$oInscription->m_bModeEdition  ){
	$sCodeInput .= 'disabled="disabled"';
}	
$sCodeInput .= '>';
$sCodeInput .= '<option>S&eacute;lectionner</option>';
foreach ($oInscription->m_aListeLevel as $sCle => $sValeur) {
	$sCodeOption = '<option';
	$sCodeOption .= ' style="width: 100px;" value=' . $sCle . '>';
	$sCodeOption .= $sValeur['level'].'</option>';
	$sCodeInput .= $sCodeOption;
} 										
$sCodeInput .= '</select>';
echo $sCodeInput;

En affichant le $sClé, je me suis aperçu que les value sur lesquels je joue ont les valeurs 3 et 4, et non 1 & 2 (dejà ça regle un soucis).
L affichage HTML se faisant ds un tableau (malheuresement ce n est pas moi qui ait fait l'interface graphique...sinon j aurai jamais utilisé un tableau...), je met les <div> dans un :
<tr><td>
<div id=sica">blabla</div>
<dov id="expl">blabla2</div>
</td></tr>

Mais ça n'affiche que le div pour SICA :/.

par **guilt92** » 04 juil. 2008, 16:43

Je ne suis pas sur que ca marche avec un this.value dans cette fonction, je pense pas que this existe...

je pense qu'il faut que le select passe en paramètre la valeur :

Code : Tout sélectionner

<select name="metier" id="metier" size="4" onchange="changeDiv(this.value);" >

et avoir simplement ta fonction

Code : Tout sélectionner

function changeDiv(numOption){
//...
}

Mais pour le reste je suis d'accord avec Shrell

par **Shrell** » 04 juil. 2008, 16:33

alors, d'abord l'écouteur n'est pas le bon : tu veux changer ce qui est affiché quand la valeur du select change, pas quand on double-clique dessus (ce qui excluerait les gens qui naviguent au clavier, et même pas mal de gens à la souris...).
Donc changer "ondblclick" par "onchange"
Ensuite pour la fonction, il ne faut pas boucler sur toutes les valeurs contenues dans le select, mais trouver celle qui est sélectionnée
Donc :

Code : Tout sélectionner

function changeDiv(){ 

 var expl = document.getElementById("expl"); 
 var sica = document.getElementById("sica"); 

   var numOption = this.value; // this correspond ici au select 
   if(numOption == 1){ 
    
      expl.style.display = "block"; 
      sica.style.display = "none" 
       
   }else if(numOption == 2) { 
    
      sica.style.display = "block"; 
      expl.style.display = "none"; 
       
   }else{ 
    
      sica.style.display = "none"; 
      expl.style.display = "none"; 
       
   } 
}

par **BaLiSTiK** » 04 juil. 2008, 16:27

Yop c est encore moi...décidément avec le javascript, même des trucs tres simples, je ne m'en sort pas >_<.
Pour un formulaire d'inscription, je désirerai afficher un <div> en fonction de l'option sélectionnée dans le <select>.
Si un div est affiché, les autres sont masqués. Dans ces div, du code HTML sera integré.

Code : Tout sélectionner

<script type="text/javascript">
function changeDiv(){
 var nomSelect = document.forms['frmTest'].metier;

 var expl = document.getElementById("expl");
 var sica = document.getElementById("sica");
 //alert(numOption);

for(i = 0; i <  nomSelect.length; i++) {

	var numOption = nomSelect.options[i].value;
	if(numOption == 1){
	
		expl.style.display = "block";
		sica.style.display = "none"
		
	}else if(numOption == 2) {
	
		sica.style.display = "block";
		expl.style.display = "none";
		
	}else{
	
		sica.style.display = "none";
		expl.style.display = "none";
		
	}
}
</script>
<form name="frmTest">
<select name="metier" id="metier" size="4" ondblclick="changeDiv();" >
 <option>Selectionner</option>
 <option value="1">Exploitant</option>
 <option value="2">SICA</option>
 <option value="3">Ouvrier</option>
</select>
</form>

<div id="expl">code pour exploitant</div>
<div id="sica">code pour sica</div>

Merci d'avance

Afficher div en fonction du <select>

Répondre

Étendre la vue Revue du sujet : Afficher div en fonction du <select>

Afficher div en fonction du <select>