[Servlet / JSP / AJAX] Remplir un <select> en fonction d'un autre <select>

Bonjour,
J'ai deux selects dans une page JSP.
Le premier select est complété.
Le deuxième est vide.

Lorsque je choisi une valeur dans le premier, le deuxième doit se remplir en fonction de la valeur choisie dans le premier.

Voici en gros mon code :

JSP principale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
....
<form action="ControllerPrincipal" >
                <label>No de libre</label>
                <select name="book" onchange="htmlData(this.value, 'GetChapters')">
                    <option value="">-------------</option>
                    <c:forEach var="cl" items="${requestScope.cl}">
                        <option value="${cl.num}">${cl.nom}</option>
                    </c:forEach>
                </select>
 
                <label>No chapitre</label>
                <span id="equ">
                    <select name="chapitres" id="selecchapitres">
                        <option value="">--------------</option>
                    </select>
                </span>
 
                <input type="submit"/>
            </form>
...

Le code ajax qui est bien intégré dans la JSP précédente :

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
 
function GetXmlHttpObject(handler)
{
    var objXMLHttp=null
    if (window.XMLHttpRequest)
    {
        objXMLHttp=new XMLHttpRequest()
    }
    else if (window.ActiveXObject)
    {
        objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
    return objXMLHttp
}
 
function stateChanged()
{
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
        alert(xmlHttp.responseText);
        document.getElementById("equ").innerHTML = xmlHttp.responseText; 
    }
    else {
//alert(xmlHttp.status);
}
}
 
function htmlData(selectedValue, url)
{
    if (url.length==0)
    {
        document.getElementById("equ").innerHTML="erreur";
        alert("URL equals FAIL");
        return;
    }
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
 
    url=url+"?dropDown="+selectedValue; 
    url=url+"&sid="+Math.random();
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

Controlleur GetChapters.java :

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
 
public class GetChapters extends HttpServlet {
 
    Collection<ChapitresDto> chapters;
 
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException {
        HttpSession session = request.getSession();
        session.setMaxInactiveInterval(60 * 60);
 
        String livre = request.getParameter("dropDown");
        try {
            chapters = MaFacade.getChapsDeLivre(Integer.parseInt(livre));
        } catch (BLException ex) {
            Logger.getLogger(GetChapters.class.getName()).log(Level.SEVERE, null, ex);
        }
 
        session.setAttribute("chapters", chapters);
        RequestDispatcher rd = request.getRequestDispatcher("replaceText.jsp");
        rd.forward(request, response);
    }
 
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException {
    }
}

Et enfin, la JSP "replaceText.jsp" :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false"%>
 
<select name="chapterDropDown" id="chapterDropDown">
    <option value="">--------------</option>
    <c:forEach var="chapters" items="${chapters}">
        <option value=${chapters.num}>${chapters.num}</option>
    </c:forEach>
</select>

A l'exécution le premier select est bien rempli avec les bonnes valeurs, le deuxième select contient uniquement "-----------". Quand je change une valeur sur le premier select, le deuxième select disparait complètement au lieu d'être rempli avec les valeurs adéquates...

Pourriez-vous m'aider?

Merci d'avance :ccool: