Faire un filtre des villes

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 069 fois - Téléchargée 16 fois

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

Ajouter un commentaire Commentaire
Messages postés
79
Date d'inscription
lundi 10 mars 2003
Statut
Membre
Dernière intervention
12 juillet 2010

essaye ça :

<html><head>
<script language="javascript">
map = {
"DZ":"Annaba,*Alger,Oran,Constantine",
"BE":"Anvers,*Bruxelles,Gent,Liège",
"SP":"Barcelone,*Madrid,Malaga",
"FR":"Lille,Lyon,Marseille,*Paris",
"MA":"Tanger,*Rabat,Agadir"};

function chargeVille(src,val)
{
v= document.getElementById(src);
for (e in v.options)
v.options[e]=null; //on efface
k=map[val].split(",");
for (e in k)
{
m=k[e][0]=='*';
v.options[e] = new Option(m?k[e].substring(1):k[e],k[e]);
if (m)
v.selectedIndex = e;
}
}
</script>
</head>

Pays <select id="pays" onchange="chargeVille('ville',this.value);">
<option value="DZ">Algérie</option>
<option value="BE">Belgique</option>
<option value="SP">Espagne</option>
<option value="FR" selected>France</option>
<option value="MA">Maroc</option>
</select> Ville <select id="ville"></select>
</html>

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.