JSP中的級聯(lián)下拉列表-魔扣目錄

本文介紹了JSP中的級聯(lián)下拉列表的處理方法，對大家解決問題具有一定的參考價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧！

問題描述

我是JSP新手，我曾嘗試為我的問題找到解決方案，但不幸的是，我無法找到解決方案。
所以我要做的是有2個(gè)下拉列表，當(dāng)我從第一個(gè)列表中選擇一個(gè)值時(shí)，必須過濾第二個(gè)下拉列表。
這是我到目前為止所做的：
Servlet將以下對象傳遞給jsp：

    getServletContext().setAttribute("foodDetails", fds.findAll());

    request.getRequestDispatcher(url).forward(request, response);

在jsp代碼中，我創(chuàng)建了兩個(gè)下拉列表，并使用以下代碼填充列表：

   <tr>
    <td>Detay Tipi 1</td>   
     <td>
       <select name="tip" id="tip" onchange="">     
         <option value="porsiyon">porsiyon</option>
         <option value="extra">extra</option>
       </select>  
     </td>
     <td>
        <select name="tip2" id="tip2" onchange="">
          <option value"Lütfen Tip Se?iniz">Lütfen Tip Se?iniz</option>
        </select>  
     </td>
   </tr>

因此，當(dāng)用戶從第一個(gè)下拉列表中選擇”porsiyon”時(shí)，第二個(gè)列表將填充來自${foodDetails}的值。為此，我使用以下代碼覆蓋了first Drop的onchange方法：

  <script type="text/javascript">
     $(document).ready(function(){
     $("#tip").change(function(){
     tip2.length = 1;
     var x=$(this).val();
     <c:forEach var="fd" items="${foodDetails}">
     <c:if test="${fd.detailcategory == x}"> 
     tip2.options[tip2.options.length]  = new Option("${fd.name}","${fd.name}");
     </c:if>
     </c:forEach>
       });
       });
</script>

很遺憾，當(dāng)我切換時(shí)這不起作用

  var x=$(this).val();

靜電取值如：

  <c:set var="x" scope="session" value='ekstra'/>

它的工作方式類似于咒語，其中c定義為：

  <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>.

我可能犯了一個(gè)非常明顯的錯(cuò)誤，但我想不出是什么錯(cuò)誤。這是我的第一個(gè)jsp頁面，所以對我不要太客氣：)
PS：我認(rèn)為回答這個(gè)問題不需要類，但是foodDetails有一個(gè)foodDetail列表，其中foodDetail.Detail類別可以是”porsiyon”或”Ekstra”。

謝謝，

JSTL

問題與您的腳本未觸發(fā)onchange事件無關(guān)，正如您在嵌入式代碼段中看到的那樣，相反，您正在嘗試在客戶端而不是在服務(wù)器端調(diào)用推薦答案函數(shù)。

您可以嘗試以下操作：

AJAX

假設(shè)您有一個(gè)foodDetails.jsp，它接收一個(gè)名為CATEGORY的過濾參數(shù)。使用此參數(shù)，您可以從JSP構(gòu)建基于JSON的響應(yīng)。

foodDetails.jsp

"{filteredList: "
<c:forEach var="fd" "items="${foodDetails}">
    <c:if test="${fd.detailcategory == category}">
        "${fd.detailcategory},"     
    </c:if>
</c:forEach>
"}"

從您的客戶端(Web瀏覽器)

您可以在激發(fā)onchange事件時(shí)使用foodDetails.jsp使用Ajax調(diào)用foodDetails.jsp.

jQuery(document).ready(function(){
        jQuery("#tip").change(function() {
    var category = jQuery(this).val();
    addFilteredItems(category);
});

function addFilteredItems(category) {
    jQuery.ajax({
        type: "GET",
        url: "/path/to/the/foodDetails.jsp?category=" + category,
        dataType: "json"
        _: jQuery.now()
    }).done(function(data) {
        jQuery.each(data, function(k, v) {
            var result = v["filteredList"];
            jQuery.each(result.split(","), function() {
                var item = jQuery(this).val();
                // add options
            });
        });
    });
}

代碼段

jQuery(document).ready(function(){
  jQuery("#tip").change(function(){
    var x= $(this).val();
    alert(x);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>Detay Tipi 1</td>   
    <td>
      <select name="tip" id="tip" onchange="">     
        <option value="porsiyon">porsiyon</option>
        <option value="extra">extra</option>
      </select>  
    </td>
    <td>
      <select name="tip2" id="tip2" onchange="">
        <option value"Lütfen Tip Se?iniz">Lütfen Tip Se?iniz</option>
      </select>  
    </td>
</tr>

這篇關(guān)于JSP中的級聯(lián)下拉列表的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，