Le remplissage des listes déroulantes en cascade en JSP/Servlet

Il y a essentiellement trois façons d'y parvenir:

1. soumettre un formulaire à un servlet lors de l'événement onchange de la 1ère descente (vous pouvez utiliser Javascript pour cela), laisser le servlet obtenir l'élément sélectionné de la 1ère descente comme paramètre de demande, lui laisser obtenir les valeurs associées de la 2ème descente à partir de la base de données comme un Map<String, String> , le laisser les stocker dans le champ de la requête. Enfin, laissez JSP / JSTL afficher les valeurs de la 2ème déroulante. Vous pouvez utiliser JSTL (il suffit de laisser tomber jstl-1.2.jar in /WEB-INF/lib ) c:forEach une étiquette pour ça. Vous pouvez pré-remplir la 1ère liste de la méthode doGet() de la méthode Servlet associée à la page JSP.

   <select name="dd1" onchange="submit()">
       <c:forEach items="${dd1options}" var="option">
           <option value="${option.key}" ${param.dd1 == option.key ? 'selected' : ''}>${option.value}</option>
       </c:forEach>
   </select>
   <select name="dd2" onchange="submit()">
       <c:if test="${empty dd2options}">
           <option>Please select parent</option>
       </c:if>
       <c:forEach items="${dd2options}" var="option">
           <option value="${option.key}" ${param.dd2 == option.key ? 'selected' : ''}>${option.value}</option>
       </c:forEach>
   </select>
   <select name="dd3">
       <c:if test="${empty dd3options}">
           <option>Please select parent</option>
       </c:if>
       <c:forEach items="${dd3options}" var="option">
           <option value="${option.key}" ${param.dd3 == option.key ? 'selected' : ''}>${option.value}</option>
       </c:forEach>
   </select>
   

   une fois que la mise en garde est toutefois que cela va soumettre le entier formulaire et causer un "flash de contenu" qui peut être mauvais pour L'expérience de l'utilisateur. Vous devrez également conserver les autres champs du même formulaire en fonction des paramètres de la requête. Vous devrez également déterminer dans la servlet si la demande est de mettre à jour une liste déroulante (enfant déroulante valeur est nulle) ou pour soumettre le formulaire.

2. imprimez toutes les valeurs possibles du 2e et du 3e dropdown en tant qu'objet Javascript et utilisez une fonction Javascript pour remplir le 2e dropdown basé sur l'élément sélectionné du 1er dropdown pendant l'évènement onchange du 1er dropdown. Aucune soumission de formulaire et aucun cycle de serveur n'est nécessaire ici.

   <script>
       var dd2options = ${dd2optionsAsJSObject};
       var dd3options = ${dd3optionsAsJSObject};
       function dd1change(dd1) {
           // Fill dd2 options based on selected dd1 value.
           var selected = dd1.options[dd1.selectedIndex].value;
           ...
       }
       function dd2change(dd2) {
           // Fill dd3 options based on selected dd2 value.
           var selected = dd2.options[dd2.selectedIndex].value;
           ...
       }
   </script>
   
   <select name="dd1" onchange="dd1change(this)">
       <c:forEach items="${dd1options}" var="option">
           <option value="${option.key}" ${param.dd1 == option.key ? 'selected' : ''}>${option.value}</option>
       </c:forEach>
   </select>
   <select name="dd2" onchange="dd2change(this)">
       <option>Please select parent</option>
   </select>
   <select name="dd3">
       <option>Please select parent</option>
   </select>
   

   une mise en garde est cependant que cela peut devenir inutilement long et coûteux quand vous avez un lot d'articles. Imaginez que vous avez 3 étapes de chaque 100 éléments possibles, qui signifierait 100 * 100 * 100 = 1 000 000 d'articles dans les objets JS. La page HTML augmenterait de plus de 1MB de longueur.

3. Utilisez XMLHttpRequest en Javascript pour lancer une requête asynchrone à un servlet lors de l'événement onchange de la 1ère descente, laissez le servlet obtenir l'élément sélectionné de la 1ère descente comme paramètre de requête, laissez-le obtenir les valeurs associées de la 2ème descente à partir de la base de données, le retourner comme XML ou JSON string. Pour finir, laissez Javascript afficher les valeurs de la deuxième liste déroulante dans L'arborescence du DOM HTML (à la façon Ajax, comme suggéré plus haut). Le meilleur moyen pour il s'agirait de jQuery .

   <%@ page pageEncoding="UTF-8" %>
   <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
   <!DOCTYPE html>
   <html lang="en">
       <head>
           <title>SO question 2263996</title>
           <script src="http://code.jquery.com/jquery-latest.min.js"></script>
           <script>
               $(document).ready(function() {
                   $('#dd1').change(function() { fillOptions('dd2', this); });
                   $('#dd2').change(function() { fillOptions('dd3', this); });
               });
               function fillOptions(ddId, callingElement) {
                   var dd = $('#' + ddId);
                   $.getJSON('json/options?dd=' + ddId + '&val=' + $(callingElement).val(), function(opts) {
                       $('>option', dd).remove(); // Clean old options first.
                       if (opts) {
                           $.each(opts, function(key, value) {
                               dd.append($('<option/>').val(key).text(value));
                           });
                       } else {
                           dd.append($('<option/>').text("Please select parent"));
                       }
                   });
               }
           </script>
       </head>
       <body>
           <form>
               <select id="dd1" name="dd1">
                   <c:forEach items="${dd1}" var="option">
                       <option value="${option.key}" ${param.dd1 == option.key ? 'selected' : ''}>${option.value}</option>
                   </c:forEach>
               </select>
               <select id="dd2" name="dd2">
                   <option>Please select parent</option>
               </select>
               <select id="dd3" name="dd3">
                   <option>Please select parent</option>
               </select>
           </form>
       </body>
   </html>
   

   ..où le Servlet derrière /json/options peut ressembler à ceci:

   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       String dd = request.getParameter("dd"); // ID of child DD to fill options for.
       String val = request.getParameter("val"); // Value of parent DD to find associated child DD options for.
       Map<String, String> options = optionDAO.find(dd, val);
       String json = new Gson().toJson(options);
       response.setContentType("application/json");
       response.setCharacterEncoding("UTF-8");
       response.getWriter().write(json);
   }
   

   ici, Gson est Google Gson qui facilite la conversion fullworthy objets Java en JSON et vice versa. Voir aussi comment utiliser Servlets et Ajax?