Bonjour

J'ai 2 listes déroulantes, la 1ère contient la liste des pays: Espagne, France, Italie et la 2e contient les villes : Barcelone,Madrid,Séville, Lille, Lyon, Paris, Milan,Rome.

Je voudrais faire ceci: lorsque je clique par exemple sur Espagne, la liste de la 2e liste déroulante sera : Barcelone,Madrid,Séville; lorsque je clique sur France, la 2e liste déroulante sera Lille, Lyon, Paris...ainsi de suite.

J'aimerais donc que ma 2e liste déroulante soit remplie en fonction du pays que j'ai choisi dans la 1ere liste déroulante.

Le code que j'ai permet seulement de changer la valeur de la 2e liste déroulante et toute la liste:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<script language="javascript">
            function changerVille() {
    var x = document.getElementById("pays").selectedIndex;
    var y = document.getElementById("pays").options;
    var z = y[x].value.lastIndexOf("-");
    document.getElementById(y[x].value.substr(z+1)).selected = "true";
  }
</script>
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="styled-select">
    <select  id="pays" onchange="changerVille()">
        <option value="select">Sélectionnez un</option>
        <option value="Barcelone-Espagne">Doutchi</option>
        <option value="Lille-France">Lille</option>
        <option value="Rome-Italie">Rome</option>
    </select>
</div>
<div class="styled-select">
    <select  id="ville">                                                  
        <option id="Espagne" value="Espagne">Espagne</option>
        <option id="France" value="France">France</option>
        <option id="Italie" value="Italie">Italie</option>
    </select>
</div>

Merci