Faire un filtre des villes

Commenter

Contenu du snippet

Ce script vous permet d'afficher la liste des villes, selon le choix de votre pays .
Il contient une liste déroulante pays qui permet de choisir le pays dont vous voulez afficher la liste de ses villes , comme il contient 6 listes des villes qui crrespond chacune d'elles à un pays.

Source / Exemple : 


<html>
<head>

<script language="JavaScript" type="text/javascript">
function griser() {
with(document.form) {

if(pays.options[pays.options.selectedIndex].value=="Algerie") 
{
Algerie.style.visibility='visible';
Lybie.style.visibility='hidden';
Maroc.style.visibility='hidden';
Mauretanie.style.visibility='hidden';
RASD.style.visibility='hidden';
Tunisie.style.visibility='hidden';
}
else 
{

if(pays.options[pays.options.selectedIndex].value=="Lybie") 
{
Algerie.style.visibility='hidden';
Lybie.style.visibility='visible';
Maroc.style.visibility='hidden';
Mauretanie.style.visibility='hidden';
RASD.style.visibility='hidden';
Tunisie.style.visibility='hidden';
}
else
{
if(pays.options[pays.options.selectedIndex].value=="Maroc") 
{
Algerie.style.visibility='hidden';
Lybie.style.visibility='hidden';
Maroc.style.visibility='visible';
Mauretanie.style.visibility='hidden';
RASD.style.visibility='hidden';
Tunisie.style.visibility='hidden';
}
else 
{
if(pays.options[pays.options.selectedIndex].value=="Mauretanie") 
{
Algerie.style.visibility='hidden';
Lybie.style.visibility='hidden';
Maroc.style.visibility='hidden';
Mauretanie.style.visibility='visible';
RASD.style.visibility='hidden';
Tunisie.style.visibility='hidden';
}
else
{
if(pays.options[pays.options.selectedIndex].value=="RASD") 
{
Algerie.style.visibility='hidden';
Lybie.style.visibility='hidden';
Maroc.style.visibility='hidden';
Mauretanie.style.visibility='hidden';
RASD.style.visibility='visible';
Tunisie.style.visibility='hidden';
}
else
{
if(pays.options[pays.options.selectedIndex].value=="Tunisie") 
{
Algerie.style.visibility='hidden';
Lybie.style.visibility='hidden';
Maroc.style.visibility='hidden';
Mauretanie.style.visibility='hidden';
RASD.style.visibility='hidden';
Tunisie.style.visibility='visible';
}
}
}
}
}
}
}
}
</script>

<style type="text/css">
<!--
#ville {
	position:absolute;
	left:108px;
	top:15px;
	width:159px;
	height:20px;
	z-index:1;
}
-->
</style>
</head>
<body>

<form id="form1" name="form" method="post" action="tester.php">

  
  <div align="left" >
    <select name="pays" onChange="griser();">
      <option value="Algerie">Algerie</option>
	   <option value="Lybie" >Lybie</option>   
      <option value="Maroc" >Maroc</option>
	   <option value="Mauretanie" >Maurétanie</option>
	    <option value="RASD" >RASD</option>
		 <option value="Tunisie" >Tunisie</option>
    </select>
    <div id="ville" >
      <div></div>
      <select name="Algerie">

        <option value="Alger"> Alger</option>
      
      </select>
</div>
  <div id="ville">
    <select name="Lybie" style="visibility:hidden">

	    <option value="Ajdabiya">Ajdabiya</option>

     
    </select>
	</div>
	  <div id="ville">
<select name="Maroc" style="visibility:hidden">
<option value="Chaouia-Ouardigha">Chaouia-Ouardigha </option>

    </select>
	</div>
	  <div id="ville">
    <select name="Mauretanie" style="visibility:hidden">
      <option value="Adrar">Adrar </option>
 
    </select>
	</div>
	  <div id="ville">
    <select name="RASD" style="visibility:hidden">
	 <option value="Laâyoune">Laâyoune</option>
	
    </select>
	</div>
	  <div id="ville">
    <select name="Tunisie" style="visibility:hidden" >
      <option value="Ariana"> Ariana</option>
	
    </select>
	</div>
    
  </div>
  </label>
  <label>
  <input type="submit" name="Submit" value="Submit" />
  </label>
</form></body></html>

Conclusion :


Normalement ce script marche bien .

bon courage

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.