Listes déroulantes "croisées"

Signaler
Messages postés
104
Date d'inscription
jeudi 28 juin 2007
Statut
Membre
Dernière intervention
1 mars 2020
-
 Tramweb -
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

--

2 réponses

Messages postés
1750
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2020
56
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
104
Date d'inscription
jeudi 28 juin 2007
Statut
Membre
Dernière intervention
1 mars 2020
1
Bonjour,
Formidable. Ca correspond tout a fait a ce que je recherche.
Merci beaucoup pour votre aide
Bonne journée
Michel2107
Messages postés
104
Date d'inscription
jeudi 28 juin 2007
Statut
Membre
Dernière intervention
1 mars 2020
1
Par contre je me permets de reprendre le topic car j'ai un souci.
J'ai opté pour le 1er script
Le script fonctionne magnifiquement. Mon seul probleme c'est que lorsque je fais mes choix, je n'arrive pas a faire d'action derrière.
Par exemple, dans pays j'ai France,Allemagne, Espagne ... dans villes j'ai Paris, Madrid, Lille, Berlin, Lyon ...
Quand je choisis France dans les pays, dans villes il me reste bien Paris, Bordeaux et Lyon mais quand je choisis une de ces 3 villes, j'aimerai que le page associée a la ville s'affiche ... et ça je n'y arrive pas.

Une petite aide ne serait pas de refus.
Merci
Messages postés
1750
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2020
56
il faut mettre un evenement onchange qui redirigera vers la fonction a executer dans la fonction il faut utiliser value pour recuperer la valeur location.href pour diriger vers une page


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

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


Michel2107
Messages postés
104
Date d'inscription
jeudi 28 juin 2007
Statut
Membre
Dernière intervention
1 mars 2020
1
Merci pour votre réponse.
Ce script se met a la suite du script utilisé ?
Désolé ça reste encore flou ...
Bonjour, pour plus de clarté déjà un peu de programmation événementielle:

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Vous pouvez aussi passer par le bouton submit du formulaire qui enverra les données car c'est le comportement normal et ce à quoi s'attend l'utilisateur(et que tous les champs de saisie - en anglais input-) sont censés être dans un formulaire , ce que vous n'avez pas fait.

des exemples ici:
https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript/1919022-les-formulaires

Si c'est en rapport avec la base de données que les données sont liées(donc page dynamique) il est encore mieux de passer par AJAX pour réduire le temps de traitement(car moins de requêtes côté programme serveur et B.D.D.).