Populating cascading dropdown lists in JSP/Servlet -


suppose having 3 dropdownlist controls named dd1, dd2 , dd3. value of each dropdownlist comes database. dd3's value depends upon value of dd2 , dd2's value depends on value of dd1. can tell me how call servlet problem?

there 3 ways achieve this:

  1. submit form servlet during onchange event of 1st dropdown (you can use javascript this), let servlet selected item of 1st dropdown request parameter, let obtain associated values of 2nd dropdown database map<string, string>, let store them in request scope. let jsp/jstl display values in 2nd dropdown. can use jstl (just drop jstl-1.2.jar in /web-inf/lib) c:foreach tag this. can prepopulate 1st list in doget() method of servlet associated 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>

    once caveat submit entire form , cause "flash of content" may bad user experience. you'll need retain other fields in same form based on request parameters. you'll need determine in servlet whether request update dropdown (child dropdown value null) or submit actual form.

  2. print possible values of 2nd , 3rd dropdown out javascript object , make use of javascript function fill 2nd dropdown based on selected item of 1st dropdown during onchange event of 1st dropdown. no form submit , no server cycle 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>

    one caveat may become unnecessarily lengthy , expensive when have a lot of items. imagine have 3 steps of each 100 possible items, mean 100 * 100 * 100 = 1,000,000 items in js objects. html page grow on 1mb in length.

  3. make use of xmlhttprequest in javascript fire asynchronous request servlet during onchange event of 1st dropdown, let servlet selected item of 1st dropdown request parameter, let obtain associated values of 2nd dropdown database, return xml or json string. let javascript display values in 2nd dropdown through html dom tree (the ajax way, suggested before). best way 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>

    ..where servlet behind /json/options can this:

    protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {     string dd = request.getparameter("dd"); // id of child dd fill options for.     string val = request.getparameter("val"); // value of parent dd 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); }

    here, gson google gson eases converting fullworthy java objects json , vice versa. see how use servlets , ajax?


Comments

Post a Comment