A voir également:
- Liste déroulante javascript w3school
- Récupérer données json (javascript) - Conseils pratiques -Javascript
- Javascript poo - Conseils pratiques -Javascript
- Javascript division entière - Forum Javascript / DHTML
- Java liste ✓ - Forum Java
- Liste marque de voiture excel - Forum PHP
2 réponses
@karamel
Messages postés
1855
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 avril 2024
153
Modifié le 30 nov. 2019 à 20:14
Modifié le 30 nov. 2019 à 20:14
bonjour
un exemple utilisant un objet de type json pour stoker les ville en fonction du pays
une autre version utilisant des tableaux
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>
@karamel
Messages postés
1855
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 avril 2024
153
10 janv. 2020 à 20:08
10 janv. 2020 à 20:08
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)
}
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.).
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.).
1 déc. 2019 à 13:00
Formidable. Ca correspond tout a fait a ce que je recherche.
Merci beaucoup pour votre aide
Bonne journée
10 janv. 2020 à 17:11
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