Question

我有一个类型A的列表，其中每个元素包含另一个类型B的列表。我想创建一个表单，当用户从包含A值的下拉列表中选择一个值时，另一个下拉列表根据所选项目的类型B列表填充值。我是jQuery的新手，但我知道使用jQuery而不是纯jsp来做这个很方便。请粗略概述我为完成这项工作需要遵循的步骤。

Answer 1

JSP只是一种服务器端视图技术。它不与jQuery竞争。您可以完美地继续使用JSP。但我知道你想使用ajaxical技术而不是同步请求来发出异步请求。这在JSP中也没问题。

首先，我们需要在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>加载的外部脚本中：

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

在url-pattern的{{1}}后面的servlet中，只需将选项地图作为JSON返回。您可以使用Gson。

/dropdown2options

基本上都是这样。

Answer 2

我回答了关于chained selectors here的类似问题...我不了解jsp，但是这个jQuery版本应该给你一个想法。

如何使用jQuery和jsp生成动态下拉列表？

2 个答案: