How to generate dynamic drop down lists using jQuery and jsp?

Question

I have a list of type A, in which each element contains another list of type B. I want to create a form in which when a user selects a value from the drop down list containing values of A, another drop down to populate values based on selected item's list of Type B. I am new to jQuery but I know that it is convenient to do this using jQuery rather than pure jsp. Please give me a rough outline of steps that I need to follow to get this done.

Answer 1

I answered a similar question about chained selectors here... I don't know about jsp, but this jQuery version should give you an idea.

Answer 2

JSP is just a server side view technology. It doesn't compete with jQuery. You can perfectly keep using JSP for this. But I understand that you want to fire an asynchronous request using ajaxical techniques rather than a synchronous request. That's no problem in JSP as well.

First, we need to have two dropdowns in JSP:

<select id="dropdown1">
    <c:forEach items="#{bean.items}" var="item">
        <option value="#{item.value}">#{item.label}</option>
    </c:forEach>
</select>
<select id="dropdown2">
    <option>Please select dropdown1</option>
</select>

Then we need to attach some jQuery to the change event so that it fills the 2nd dropdown based on the value of the 1st dropdown. Add the following to the <script> in JSP or an external script which is loaded through <script src> in JSP:

$(document).ready(function() {
    $('#dropdown1').change(function() {
        var selectedValue = $(this).val();
        var servletUrl = 'dropdown2options?value=' + selectedValue;

        $.getJSON(servletUrl, function(options) {
            var dropdown2 = $('#dropdown2');
            $('>option', dropdown2).remove(); // Clean old options first.
            if (options) {
                $.each(opts, function(key, value) {
                    dropdown2.append($('<option/>').val(key).text(value));
                });
            } else {
                dropdown2.append($('<option/>').text("Please select dropdown1"));
            }
        });
    });
});

In the servlet behind the url-pattern of /dropdown2options just return the map of options as JSON. You can use Gson for this.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String selectedValue = request.getParameter("value");
    Map<String, String> options = optionDAO.find(selectedValue);
    String json = new Gson().toJson(options);
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

That's basically all.