如何使用jQuery和jsp生成動態下拉列表？

Question

我有一個類型A的列表，其中每個元素都包含另一個類型B的列表。我想創建一個表單，當用戶從包含A的值的下拉列表中選擇一個值時，另一個下拉列表填充基於B類型的選定項目的值。我是jQuery的新手，但我知道使用jQuery而不是純jsp來執行此操作非常方便。請給我一個粗略的概述，我需要遵循這些步驟才能完成。

Answer 1

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); 
} 

這基本上都是。

Answer 2

我回答了關於chained selectors here的類似問題...我不知道jsp，但是這個jQuery版本應該給你一個想法。