jquery - 如何使用jQuery和jsp生成动态下拉列表?

标签 jquery jsp

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

最佳答案

JSP 只是一种服务器端 View 技术。它不与 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事件,以便它根据第一个下拉列表的值填充第二个下拉列表。将以下内容添加到 <script>在 JSP 或通过 <script src> 加载的外部脚本中在 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"));
            }
        });
    });
});

url-pattern 后面的 servlet 中的 /dropdown2options只需将选项映射返回为 JSON .您可以使用 Gson为了这。
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 - 如何使用jQuery和jsp生成动态下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2896730/

相关文章:

c# - 在发布之前重新显示所有表单输入

javascript - 使用drawImage将加载的图像淡入Canvas

security - 在 Apache Shiro 中注销

java - java.lang.UnsupportedClassVersionError:com/google/mystorage/server/GreetingServiceImpl:不支持的major.minor版本51.0

jquery - 如何使用 CSS 将 "+"旋转到 "x"?

javascript - 将Button onClick函数转换为jQuery

javascript - 加载对话框内容并传递变量

java - 如何从其他方法访问列表?

java - 从 Tomcat 实例中的另一个 Web 应用调用方法

java - 在MySql中结合两个select语句?