jQuery 如何使用jQuery和jsp生成动态下拉列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2896730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to generate dynamic drop down lists using jQuery and jsp?
提问by sanjayav
I have a list of type A, in which each element contains another list of type B. I want to create a form in which when a user selects a value from the drop down list containing values of A, another drop down to populate values based on selected item's list of Type B. I am new to jQuery but I know that it is convenient to do this using jQuery rather than pure jsp. Please give me a rough outline of steps that I need to follow to get this done.
我有一个类型 A 的列表，其中每个元素都包含另一个类型 B 的列表。我想创建一个表单，当用户从包含 A 值的下拉列表中选择一个值时，另一个下拉列表将填充基于值的值在所选项目的 B 型列表中。我是 jQuery 新手，但我知道使用 jQuery 而不是纯 jsp 来做到这一点很方便。请给我一个粗略的步骤，我需要遵循这些步骤来完成这项工作。
回答by BalusC
JSP is just a server side view technology. It doesn't compete with jQuery. You can perfectly keep using JSP for this. But I understand that you want to fire an asynchronous request using ajaxical techniques rather than a synchronous request. That's no problem in JSP as well.
JSP 只是一种服务器端视图技术。它不与 jQuery 竞争。为此，您可以完美地继续使用 JSP。但是我知道您想使用ajaxical 技术而不是同步请求来触发异步请求。这在 JSP 中也没有问题。
First, we need to have two dropdowns in 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>
Then we need to attach some jQuery to the changeevent so that it fills the 2nd dropdown based on the value of the 1st dropdown. Add the following to the <script>in JSP or an external script which is loaded through <script src>in JSP:
然后我们需要将一些 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"));
}
});
});
});
In the servlet behind the url-patternof /dropdown2optionsjust return the map of options as JSON. You can use Gsonfor this.
在url-patternof后面的 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);
}
That's basically all.
这基本上就是全部。
回答by Mottie
I answered a similar question about chained selectors here... I don't know about jsp, but this jQuery version should give you an idea.
