我有一个类型A的列表,其中每个元素都包含另一个类型B的列表。我想创建一个表单,当用户从包含A的值的下拉列表中选择一个值时,另一个下拉列表填充基于B类型的选定项目的值。我是jQuery的新手,但我知道使用jQuery而不是纯jsp来执行此操作非常方便。请给我一个粗略的概述,我需要遵循这些步骤才能完成。如何使用jQuery和jsp生成动态下拉列表?
5
A
回答
10
JSP只是一个服务器端视图技术。它不与jQuery竞争。你可以完美地继续使用JSP来做到这一点。但我明白你想要使用Ajax技术而非同步请求来发起异步请求。这在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>
或通过<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"));
}
});
});
});
在/dropdown2options
的url-pattern
背后的servlet只是返回选项映射为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);
}
这基本上都是。
0
我回答了关于chained selectors here的类似问题...我不知道jsp,但是这个jQuery版本应该给你一个想法。
相关问题
- 1. 如何使用jquery验证ajax动态生成的下拉列表?
- 2. 使用json数据动态生成下拉列表?
- 3. 如何从用户选择的动态下拉列表中生成动态URL?
- 4. 使用JQuery自动完成使用数组和下拉列表
- 5. jquery动态列表生成
- 6. 从动态生成的下拉列表中动态选择
- 7. 如何使用jQuery动态创建下拉列表?
- 8. 如何保留与jquery动态生成的下拉列表的值
- 9. 如何使用jquery动态下拉
- 10. 使用Jquery动态创建和填充下拉列表
- 11. 使用angular或javascript动态生成列表项目的选择下拉列表
- 12. 动态下拉使用jQuery?
- 13. 如何动态地使用下拉列表排序列表框?
- 14. 动态下拉使用CakePHP和jQuery
- 15. 从下拉列表动态生成Google图表类型
- 16. MYSQL生成下拉列表
- 17. ASP.Net下拉列表生成
- 18. jQuery动态列表 - 复选框和下拉列表
- 19. jQuery创建动态下拉列表
- 20. 动态jQuery切换下拉列表
- 21. 如何使用C#Razor为下拉列表和数据选择生成动态表单域
- 22. 在Gridview_RowUpdating事件中访问动态生成的下拉列表
- 23. 在动态生成的下拉列表中更改一个值
- 24. 动态ng模型生成多个下拉列表
- 25. 如何在JSP中动态生成URL?
- 26. 试图从我的postgres数据库动态生成一个JSP下拉列表中的一个JSP
- 27. 在jquery url action中动态生成api url参数来填充下拉列表
- 28. 动态列和在jqGrid中使用下拉列表
- 29. 动态下拉列表和ItemTemplate
- 30. Asp.net动态下拉列表