在 JSP/Servlet 中填充级联下拉列表 [英] Populating cascading dropdown lists in JSP/Servlet

问题描述

假设我有三个名为 dd1、dd2 和 dd3 的下拉列表控件.每个下拉列表的值来自数据库.dd3 的值取决于 dd2 的值，dd2 的值取决于 dd1 的值.谁能告诉我如何为这个问题调用 servlet?

Suppose I am having three dropdownlist controls named dd1, dd2 and dd3. The value of each dropdownlist comes from database. dd3's value depends upon value of dd2 and dd2's value depends on value of dd1. Can anyone tell me how do I call servlet for this problem?

推荐答案

基本上有以下三种方法可以实现:

There are basically three ways to achieve this:

1. 在第一个下拉列表的 onchange 事件期间提交表单给 servlet(您可以为此使用 Javascript)，让 servlet 获取第一个下拉列表的选定项作为请求参数，让它获取关联的值数据库中的第二个下拉列表作为 Map，让它将它们存储在请求范围内.最后让 JSP/JSTL 在第二个下拉列表中显示值.您可以使用 JSTL(只需删除 /WEB-INF/中的http://download.java.net/maven/1/jstl/jars/jstl-1.2.jar" rel="nofollow noreferrer">jstl-1.2.jarlib) c:forEach 标签.您可以在与 JSP 页面关联的 Servlet 的 doGet() 方法中预填充第一个列表.

1. Submit form to a servlet during the onchange event of the 1st dropdown (you can use Javascript for this), let the servlet get the selected item of the 1st dropdown as request parameter, let it obtain the associated values of the 2nd dropdown from the database as a Map<String, String>, let it store them in the request scope. Finally let JSP/JSTL display the values in the 2nd dropdown. You can use JSTL (just drop jstl-1.2.jar in /WEB-INF/lib) c:forEach tag for this. You can prepopulate the 1st list in the doGet() method of the Servlet associated with the JSP page.

 <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>

然而，有一次需要注意的是，这将提交整个表单并导致内容闪烁"这可能对用户体验不利.您还需要根据请求参数以相同的形式保留其他字段.您还需要在 servlet 中确定请求是更新下拉列表(子下拉列表值为 null)还是提交实际表单.

Once caveat is however that this will submit the entire form and cause a "flash of content" which may be bad for User Experience. You'll also need to retain the other fields in the same form based on the request parameters. You'll also need to determine in the servlet whether the request is to update a dropdown (child dropdown value is null) or to submit the actual form.

将第 2 个和第 3 个下拉列表的所有可能值打印为 Javascript 对象，并在第 1 个下拉列表的 onchange 事件期间根据第 1 个下拉列表的所选项目使用 Javascript 函数填充第 2 个下拉列表.这里不需要表单提交，也不需要服务器周期.

Print all possible values of the 2nd and 3rd dropdown out as a Javascript object and make use of a Javascript function to fill the 2nd dropdown based on the selected item of the 1st dropdown during the onchange event of the 1st dropdown. No form submit and no server cycle is needed here.

 <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>

但是需要注意的是，当您拥有很多的物品时，这可能会变得不必要地冗长且昂贵.想象一下，每 100 个可能的项目有 3 个步骤，这意味着 JS 对象中有 100 * 100 * 100 = 1,000,000 个项目.HTML 页面的长度将增长超过 1MB.

One caveat is however that this may become unnecessarily lengthy and expensive when you have a lot of items. Imagine that you have 3 steps of each 100 possible items, that would mean 100 * 100 * 100 = 1,000,000 items in JS objects. The HTML page would grow over 1MB in length.

利用Javascript中的XMLHttpRequest在第一个下拉列表的onchange事件期间向servlet发起异步请求，让servlet获取第一个下拉列表的选中项作为请求参数，让它获取关联值从数据库的第二个下拉列表中，将其作为 XML 或 返回JSON 字符串.最后让 Javascript 通过 HTML DOM 树(如之前建议的 Ajax 方式)显示第二个下拉列表中的值.最好的方法是使用 jQuery.

Make use of XMLHttpRequest in Javascript to fire an asynchronous request to a servlet during the onchange event of the 1st dropdown, let the servlet get the selected item of the 1st dropdown as request parameter, let it obtain the associated values of the 2nd dropdown from the database, return it back as XML or JSON string. Finally let Javascript display the values in the 2nd dropdown through the HTML DOM tree (the Ajax way, as suggested before). The best way for this would be using 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>

.../json/options 后面的 Servlet 看起来像这样:

..where the Servlet behind /json/options can look like this:

 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);
 }

这里，Gson 是 Google Gson轻松将完全有价值的 Java 对象转换为 JSON，反之亦然.另请参阅如何使用 Servlet 和 Ajax?

Here, Gson is Google Gson which eases converting fullworthy Java objects to JSON and vice versa. See also How to use Servlets and Ajax?

这篇关于在 JSP/Servlet 中填充级联下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！