我有一个类型 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"));
}
});
});
});
在servlet后面url-pattern
的/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/