我有一个类型A的列表,其中每个元素包含另一个类型B的列表.我想创建一个表单,当用户从包含值A的下拉列表中选择一个值时,另一个下拉列表将填充基于值的值在选定项目的类型B列表上.我是jQuery的新手,但我知道使用jQuery而不是纯jsp来做这个很方便.请简要介绍一下我需要遵循的步骤来完成这项工作.
解决方法
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事件,以便它根据第一个下拉列表的值填充第二个下拉列表.将以下内容添加到< 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"));
}
});
});
});
在/ 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);
}
这基本上都是.
