Listes déroulantes "croisées" [Résolu]

Messages postés
98
Date d'inscription
jeudi 28 juin 2007
Statut
Membre
Dernière intervention
3 décembre 2019
- - Dernière réponse : Michel2107
Messages postés
98
Date d'inscription
jeudi 28 juin 2007
Statut
Membre
Dernière intervention
3 décembre 2019
- 1 déc. 2019 à 13:00
Bonjour,
Je cherche a faire 2 listes déroulantes "croisées" (enfin c'est moi qui les qualifient de croisées je ne sais pas si c'est le terme)

J'ai deux listes déroulantes. Une liste "pays" et une liste "villes"

<select id="pays">
<option value="" selected>Choisissez le pays</option>
<option value="1">France</option>
<option value="2">Allemagne</option>
<option value="3">Angleterre</option>
<option value="4">Espagne</option>
</select>


<select id="villes">
<option value="" selected></option>
<option value="1" data-attribute="2">Munich</option>
<option value="2" data-attribute="3">Londres</option>
<option value="3" data-attribute="1">Bordeaux</option>
<option value="4" data-attribute="1">Paris</option>
</select>


J'aimerais faire en sorte que lorsque je sélectionne "France" en pays, les villes françaises apparaissent automatiquement dans la liste villes (mais évidemment pas les autres)
J'ai mis un data-attribute avec l'attribut value correspondant au pays mais ça ne fonctionne pas. Faut t-il du javascript derriere ?
Si quelqu'un pouvait m'aider ce serait gentil.
Merci aux bonnes âmes

--
Afficher la suite 

1 réponse

Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
51
0
Merci
bonjour

un exemple utilisant un objet de type json pour stoker les ville en fonction du pays

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">

<script>

var tb_pv={

 France:["Lille","Lyon","Paris"],
 Espagne:["Barcelone","Madrid","Séville"],
 Allemagne:["bone","berlin","munich"],
 Italie:["rome","turin","milan","venise"]
}

function changerVille(lui) {

 var pays = lui.value;

 document.getElementById("ville").options.length = 0
 
 for ( var i = 0 ; i < tb_pv[pays].length ; i++) {
  
  var ville=tb_pv[pays][i]

  var elem=document.createElement('option')
  elem.setAttribute('value',ville)

  var text = document.createTextNode(ville)
  elem.appendChild(text)
  
  elem.value=ville

  document.getElementById('ville').add(elem);
 }
}
</script>
</head>
<body>

<div class="styled-select">
<select  onchange="changerVille(this)">  

<option selected="selected" value="France">France</option>
<option value="Espagne">Espagne</option>
<option  value="Allemagne">Allemagne</option>
<option  value="Italie">Italie</option>

</select>
</div>

<br><br><br>

  <div class="styled-select">
<select  id="ville">

<option value="Paris">Paris</option>
<option value="Lille">Lille</option>
<option value="Lyon">Lyon</option>

</select>
</div>
</body>
</html>


une autre version utilisant des tableaux

<!DOCTYPE html>
<html>
<head>
<script>

var tbnormandie=new Array('rouen','havre','caen');
var tbildefrance=new Array('cergy','pontoise','orly','versaille');
var tbpaca=new Array('marseille','saint-trop','miau');


function choix(lui){

var valeur=lui.value;

switch (valeur){

case "normandie":
var tableau=tbnormandie
break;

case "ile de france":
var tableau=tbildefrance
break;

case "paca":
var tableau=tbpaca
break;

}

if(document.getElementById('vivile')==null) {

var sel=document.createElement('select')
sel.name='vivile'
sel.id='vivile'
document.body.appendChild(sel)
}

document.getElementById('vivile').innerHTML=''

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

var elem=document.createElement('option')
elem.setAttribute('value',tableau[i])

var text = document.createTextNode(tableau[i])
elem.appendChild(text)

document.getElementById('vivile').appendChild(elem)
}

}
</script>

</head>

<body>

region

<select id="region" name="region" onChange='choix(this)'>
	<option value="normandie">normandie</option>;
	<option value="ile de france">ile de france</option>;
	<option value="paca">paca</option>;
	   
</select>
<br>
<br>

ville

</body>
</html> 



rien ne sert de courir il faut partir a point.
cours Forest cours !
Michel2107
Messages postés
98
Date d'inscription
jeudi 28 juin 2007
Statut
Membre
Dernière intervention
3 décembre 2019
1 -
Bonjour,
Formidable. Ca correspond tout a fait a ce que je recherche.
Merci beaucoup pour votre aide
Bonne journée
Commenter la réponse de @karamel