JSP中的级联下拉列表

Cascaded DropDown Lists in JSP(JSP中的级联下拉列表)

本文介绍了JSP中的级联下拉列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是JSP新手,我曾尝试为我的问题找到解决方案,但不幸的是,我无法找到解决方案。 所以我要做的是有2个下拉列表,当我从第一个列表中选择一个值时,必须过滤第二个下拉列表。 这是我到目前为止所做的: Servlet将以下对象传递给jsp:

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

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

在jsp代码中,我创建了两个下拉列表,并使用以下代码填充列表:

   <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>
因此,当用户从第一个下拉列表中选择"porsiyon"时,第二个列表将填充来自${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>

很遗憾,当我切换时这不起作用

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

静电取值如:

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

它的工作方式类似于咒语,其中c定义为:

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

我可能犯了一个非常明显的错误,但我想不出是什么错误。这是我的第一个jsp页面,所以对我不要太客气:) PS:我认为回答这个问题不需要类,但是foodDetails有一个foodDetail列表,其中foodDetail.Detail类别可以是"porsiyon"或"Ekstra"。

谢谢,

JSTL

问题与您的脚本未触发onchange事件无关,正如您在嵌入式代码段中看到的那样,相反,您正在尝试在客户端而不是在服务器端调用推荐答案函数。

您可以尝试以下操作:

  1. 创建构建基于JSON响应的JSP。
  2. 使用AJAX调用JSP
  3. 迭代您的响应以检索筛选的结果。

假设您有一个foodDetails.jsp,它接收一个名为CATEGORY的过滤参数。使用此参数,您可以从JSP构建基于JSON的响应。

foodDetails.jsp

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

从您的客户端(Web浏览器)

您可以在激发onchange事件时使用foodDetails.jsp使用Ajax调用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>

这篇关于JSP中的级联下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:JSP中的级联下拉列表

基础教程推荐