如何在JSP中制作级联下拉框？

Question

我试着在SO中搜索我的问题，发现大多数答案都是针对.Net的，而不是针对Java的。所以再问一遍这个问题。

如何在JSP中创建级联下拉菜单？也就是说，第二个下拉框的值应该取决于第一个。这些值应该从数据库中获取。我知道我应该使用AJAX，但我不知道该怎么做。如果有人能帮上忙，那就帮了大忙了。

Answer 1

您需要下载JQuery (JavaScript框架)，并将其包含在HTML部分。

<script type="text/javascript" src=PathToJquery.js></script>

在第一个dropdown的OnChange函数中，调用该函数来填充后续的dropdown。$(document).ready(function() { $('#DDIdParent').change(function() { populateChildDropdown('DDIdParent'); }); });

该函数如下所示：

function populateChildDropdown(ddId) {
            var dd = $('#' + ddId);
            $.getJSON('json/mapping?dd=' + ddId, function(opts) {
                $('>option', dd).remove(); // Clear old options first.
                if (opts) {
                    $.each(opts, function(key, value) {
                        dd.append($('<option/>').val(key).text(value));
                    });
                } else {
                    dd.append($('<option/>').text("Please select the parent DD"));
                }
            });
        }

在Servlet的doGet方法中，您将拥有如下代码，以便以JSON字符串的形式从数据库中获取后续dropdown的值：

        Map options = yourDao.callDatabase(parameter);
        String json = new Gson().toJson(options);
        res.setContentType("application/json");
        res.setCharacterEncoding("UTF-8");
        res.getWriter().write(json);

您需要将json/映射映射到web.xml中的servlet。如果需要，您还可以从jquery函数传递参数。