我有一個類型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. 獲取動態生成的下拉列表的值jquery
- 3. 在Jquery中生成動態字段的下拉列表
- 4. 通過jQuery動態生成下拉列表的內容
- 5. 使用jsp生成動態表
- 6. 使用json數據動態生成下拉列表?
- 7. 如何從用戶選擇的動態下拉列表中生成動態URL?
- 8. 使用JQuery自動完成使用數組和下拉列表
- 9. jquery動態列表生成
- 10. 從動態生成的下拉列表中動態選擇
- 11. 動態下拉Jsp
- 12. 如何使用jQuery動態創建下拉列表?
- 13. 如何保留與jquery動態生成的下拉列表的值
- 14. 不使用AJAX的JSP中的動態下拉列表
- 15. 從servlet發送數據到jsp並動態生成下拉列表
- 16. 如何使用jquery動態下拉
- 17. 使用Jquery動態創建和填充下拉列表
- 18. 使用angular或javascript動態生成列表項目的選擇下拉列表
- 19. 使用Jquery動態添加下拉列表並克隆該下拉列表?
- 20. 如何在jsp中動態使用displaytag生成多個表?
- 21. 如何使用servlet在jsp上動態生成多個html表?
- 22. 如何生成SWT表格動態下拉Excel表格?
- 23. 動態下拉使用jQuery?
- 24. 如何動態地使用下拉列表排序列表框?
- 25. 動態下拉使用CakePHP和jQuery
- 26. 從下拉列表動態生成Google圖表類型
- 27. 根據動態下拉列表中的選擇生成表格?
- 28. ASP.Net下拉列表生成
- 29. 生成下拉列表
- 30. MYSQL生成下拉列表