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

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

Bonjour,
Merci beaucoup tout a fait ce que je recherche.
Merci pour ton aide

De rien.

Si le sujet est résolu, il faut sélectionner la bonne réponse, pour que les autres la voient.