Cascaded DropDown Lists in JSP

Question

I'm new to JSP i have tried to find a solution for my problem but unfortunately i couldn't. So what i m trying to do is to have 2 dropdowns and when i select a value from the first list second drop down must be filtered. And here's what i did so far : Servlet passes below objects to jsp :

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

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

In jsp code i create two dropdowns and populate the lists using below code :

   <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>

So when user selects "porsiyon" from first dropdown, second list will be populated with values from ${foodDetails}. To achieve this i overwrote first drop down's onchange method using below code :

  <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>

this unfortunately doesn't work, when i switch

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

with static value like :

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

it Works like charm where c is defined as :

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

I maybe doing a very obvious mistake but i can't figure out what. This is my first jsp page so go easy on me :) PS : i don't think classes are needed to answer this but fooddetails has a list of fooddetail where fooddetail.detailcategory can be either "porsiyon" or "ekstra".

thanks,

Answer 1

The problem is not related with your script not firing the onchange event, as you can see in the embebed snippet, instead, you're are trying to invoke JSTL functions in the client side and not in the server side.

You can try the following:

1. Create a JSP that builds up a JSON based response.
2. Call the JSP using AJAX
3. Iterate thru your response in order to retrieve your filtered results.

Let's say that you have a foodDetails.jsp that receives a filtering parameter called category. With this parameter you can build from the JSP a JSON based response.

foodDetails.jsp

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

From you client-side (Web browser)

You can call the foodDetails.jsp using AJAX whenever the onchange event is fired...

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

Snippet

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>