lier deux liste déroulante

Bonjour,

Je possède deux listes déroulantes qui se remplissent automatiquement a l'aide d'une base de donnée.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<td><select name = "type voie" id ="type voie" style="width : 120px"> 
<%
        DBConnexion dbc_typeVoie = new DBConnexion();
        String sql_typeVoie = "SELECT DISTINCT nom_type_voie FROM adresse";
        ResultSet resultat_typeVoie = dbc_typeVoie.recupereRequete(sql_typeVoie);
        while(resultat_typeVoie.next())
        {
                out.print("<option>"+resultat_typeVoie.getString("nom_type_voie")+"</option>");
        }
        dbc_typeVoie.closeConnexion();
 
%>
</select></td>
<td><select name = "nom voie" id ="nom voie"style="width : 160px">
<%
        DBConnexion dbc_nomVoie = new DBConnexion();
        String sql_nomVoie = "SELECT DISTINCT nom_voie FROM adresse";
        ResultSet resultat_nomVoie = dbc_nomVoie.recupereRequete(sql_nomVoie);
        while(resultat_nomVoie.next())
        {
                out.print("<option>"+resultat_nomVoie.getString("nom_voie")+"</option>");
        }
        dbc_nomVoie.closeConnexion();
%>
</select></td>

je voudrai les lié en sorte de sorte que lorsque que je choisi un élément dans la premiere liste déroulante, je voudrai récupérer cette valeur pour pouvoir faire ma deuxieme requete pour pouvoir remplir ma deuxieme liste déroulante. Je voudrai que ceci soit fait sans recharger la page donc on va dit d'utiliser le javascript et l'ajax. Je proramme en JSP sans servlet. J'ai déja commencé a faire le script mais sans succes je sais pas comment l'intégré.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
 
function creerRequete()
{
    try
    {
        /* On tente de créer un objet XmlHTTPRequest */
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
        /* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
            /* La première méthode a échoué, on en teste une seconde */
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
}
/**
 * Fonction privée qui va mettre à jour l'affichage de la page.
 */
 
 function actualiserNomVoie()
{
    var listeNomVoie = requete.responseText;
    var blocListe = document.getElementById('nom_voie');
    blocListe.innerHTML = listeNomVoie;
}
 
 
 
function getDepartements(idr)
{
        var blocListe = document.getElementById('nom_voie');
        /* On crée l'objet XHR */
        creerRequete();
        /* Définition du fichier de traitement */
        var url = 
 
        /* Envoi de la requête à la page de traitement */
 
        requete.open('GET', url, true);
 
        requete.onreadystatechange = function()
 
        /* Mise à jour de l'affichage, on appelle la fonction apropriée */
 
		actualiserNomVoie();
 
        requete.send(null);
 
}

Si quelqu'un peut m'aider a réaliser cela.
Merci d'avance