Salut

un tuto existe sur ce site
https://forum.phpfrance.com/faq-tutoriels/listes-liees-avec-html-javascript-t255580.html

Bonjour tous le monde,

Voilà je cherche de l'aide, sur un sujet et je ne trouve pas d'exemple.

Je voudrais crée un formulaire qui, puisse quant on choisi un select ce modifié.
je m'explique.

J'ai un 1er select pays
- FRANCE
- BELGIQUE

Quant on choisie la FRANCE
on le 2eme select affiche les villes de France

exemple Marseille

Puis on n'a 3eme select qui la liste des code postal (suivant le pays), quant il y a plusieurs choix qui s'affiche de la ville
exemple 13001 - 13002 etc ... est on fait son choix,

ainsi de suite le département et la région.

J'ai déjà fait cela mais je n'arrive pas a faire un 3eme select ainsi de suite :
[code]
<div id = "test">
<select class="field" v-model = "category" v-on:change="onChange" id="select1">
<option value="pays">Pays</option>
<option value="france">France</option>
<option value="belgique">Belgique</option>
</select>
<select id="select2" v-model= "list" class="field">
<option v-for="option in options" v-bind:value="option.value"> @{{option.text}} </option>
</select>
</div>
[/code]
[code]
<script>
new Vue({
el: '#test',
data: {
category: 'pays',
list: '',
optionsData: {

pays: [
{ text: 'Région', value: '' },
],

france: [
{ text: 'Région', value: '' },
{ text: 'Auvergne-Rhône-Alpes', value: 'auvergne-rhône-alpes' },
{ text: 'Bourgogne-Franche-Comté', value: 'bourgogne-franche-comté' },
{ text: 'Bretagne', value: 'bretagne' },
{ text: 'Centre-Val de Loire', value: 'centre-val de loire' },
{ text: 'Corse', value: 'corse' },
{ text: 'Hauts-de-France', value: 'Hauts-de-france' },
{ text: 'Île-de-France', value: 'ile-de-france' },
{ text: 'Normandie', value: 'normandie' },
{ text: 'Nouvelle-Aquitaine', value: 'nouvelle-aquitaine' },
{ text: 'Occitanie', value: 'occitanie' },
{ text: 'Pays de la Loire', value: 'pays de la loire' },
{ text: 'Provence-Alpes-Côte d\'Azur', value: 'provence-alpes-côte d\'azur' },
],

belgique: [
{ text: 'Région', value: '' },
{ text: 'Bruxelles Capitale', value: 'bruxelles capitale' },
{ text: 'Flandres', value: 'flandres' },
{ text: 'Wallonie', value: 'wallonie' },
],
}
},

computed: {
options: function() {
let options = ''
switch(this.category) {
case 'pays':
options = this.optionsData.pays
break;

case 'france':
options = this.optionsData.france
break;

case 'belgique':
options = this.optionsData.belgique
break;

default:
options = this.optionsData.pays
}
return options
}
},
methods: {
onChange: function ()
{
this.options = this.options
}
}
})

</script>
[/code]
Voilà,

Merci de votre aide,