如何使用jQuery和Jsp生成动态下拉列表? [英] How to generate dynamic drop down lists using jQuery and jsp?

问题描述

我有一个类型A的列表，其中每个元素都包含另一个类型B的列表.我想创建一个表单，当用户从包含A值的下拉列表中选择一个值时，另一个表单根据类型B的选定项目列表填充值.我是jQuery的新手，但我知道使用jQuery(而不是纯jsp)进行此操作很方便.请给我一个大致的步骤概述，以完成此操作.

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.

推荐答案

JSP只是服务器侧视图技术.它无法与jQuery竞争.您可以完美地继续使用JSP.但我知道您想使用Ajaxical技术而非同步请求来触发异步请求.在JSP中也没问题.

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.

首先，我们需要在JSP中有两个下拉菜单:

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>

然后，我们需要将一些jQuery附加到change事件，以便它根据第一个下拉列表的值填充第二个下拉列表.将以下内容添加到JSP中的<script>或通过JSP中的<script src>加载的外部脚本中:

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

在/dropdown2options的url-pattern后面的servlet中，只需将选项映射返回为 JSON .您可以为此使用 Gson .

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

基本上就是全部.

这篇关于如何使用jQuery和Jsp生成动态下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！