Ответ 1
Существует три способа достижения этого:
-
Отправьте форму сервлету во время события onchange первого выпадающего списка (вы можете использовать Javascript для этого), пусть сервлет получит выбранный элемент 1-го раскрывающегося списка в качестве параметра запроса, пусть он получит связанные значения второй выпадающий список из базы данных как
Map<String, String>, пусть он сохранит их в области запроса. Наконец, пусть JSP/JSTL отображает значения во втором раскрывающемся списке. Вы можете использовать JSTL (просто снимите jstl-1.2.jar in/WEB-INF/lib)c:forEachдля этого. Вы можете предварительно заполнить 1-й список в методеdoGet()Servlet, связанный со страницей 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>Как только предостережение, тем не менее, оно отправит форму целиком и вызовет "флэш-контент", который может быть плохим для User Experience. Вам также необходимо сохранить другие поля в той же форме на основе параметров запроса. Вам также необходимо определить в сервлете, нужно ли обновлять раскрывающийся список (выпадающее значение дочернего элемента равно null) или отправить фактическую форму.
-
Распечатайте все возможные значения 2-го и 3-го выпадающих списков в качестве объекта Javascript и используйте функцию Javascript, чтобы заполнить второе раскрывающееся меню на основе выбранного пункта 1-го раскрывающегося списка во время события onchange первого выпадающего списка, Никакая форма не отправляется и серверный цикл не требуется.
<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>Одно из предостережений заключается в том, что это может стать излишне длинным и дорогостоящим, если у вас много элементов. Представьте, что у вас есть 3 шага по 100 возможных предметов, что означает 100 * 100 * 100 = 1 000 000 предметов в объектах JS. HTML-страница будет расти более 1 МБ.
-
Использовать XMLHttpRequest в Javascript для запуска асинхронного запроса на сервлет во время события onchange первого выпадающего списка, пусть сервлет получает выбранный элемент 1-го раскрывающегося списка в качестве параметра запроса, позволяет получить связанные значения 2-го выпадающего списка из базы данных, верните его как XML или JSON string. Наконец, пусть Javascript отображает значения во втором раскрывающемся списке в дереве HTML DOM (путь Ajax, как было предложено ранее). Лучший способ для этого - использовать 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>.. где
Servletпозади/json/optionsможет выглядеть так: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); }Здесь
GsonGoogle Gson, который упрощает преобразование полноправных объектов Java в JSON и наоборот. См. Также Как использовать сервлеты и Ajax?