how to get the values list from Spring MVC Controller to jsp page on selecting an option in dropdown

Question

In a jsp page there will 3 drop downs on clicking one drop down and selecting a value,another drop down will open and on clicking that another drop down and selecting a value,one more drop down will open where there will be list of values from Spring MVC Controller.So how to do this

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
   <script type="text/javascript">
   $(document).ready(function() {
       $('#company').change(function() {
           var e = document.getElementById('company');
           var value1 = e.options[e.selectedIndex].value;
           alert(value1);
           $.ajax({
               type : 'GET',
               url : 'companynames',
               data : {
                   company : value1
               },
               success : function(response) {
                   getcompNames(response);
              }
           });
       });
   });

   function getCompNames(response) {
       $('#corpotrips option').remove();

       var options = '';
       $.each(response, function(index,item) {
           options += '<option value="' +item+ '">' + item + '<option>';
           $('#corpotrips').html(options);
       })
   }

   $(function() {
        $('.multiselect').multiselect();
    });
  $(document).ready(function(){
      $("#individual").hide();
      $("#corporate").hide();
      $("#companies").hide();
      $("#deadbills").hide();
        $('#Type').on('change', function() {

          if ( this.value == 'Individual')
          {

            $("#individual").show();
            $("#corporate").hide();
            $("#companies").hide();
            $("#deadbills").hide();

          }
          else if(this.value == 'Corporate')
          {

            $("#individual").hide();
            $("#corporate").hide();
            $("#companies").show();
            $("#deadbills").hide();
          }
          else if(this.value == 'DeadBills')
              {

              $("#individual").hide();
              $("#corporate").hide();
              $("#companies").hide();
              $("#deadbills").show();
              }

          else {

              $("#individual").hide();
              $("#corporate").hide();
              $("#companies").hide();
              $("#deadbills").hide();
          }
        });
    });
  </script>
</head>
<body>

<div class="container">
<form action="Bills" method="post">

        <table><tr>
        <td><select id='Type' name = "tripType">
        <option value="">select</option>
<option value="Individual">Individual</option>
<option value="Corporate">Corporate</option>
<option value="DeadBills">DeadBills</option>
</select></td>
<td><div id='individual'>
 <select id="multiple-checkboxes" multiple="multiple" name="tripNumber">

        <c:forEach var="bills" items="${individualTrips}">
    <option value="${bills.tripNumber}">${bills.tripNumber}</option>
      </c:forEach>
    </select>
</div></td>
<td><div id='companies'>
 <select id='company' name="companyName">
     <option>Select Company</option>
        <c:forEach var="bills" items="${corporateTrips}">

    <option value="${bills.companyName}">${bills.companyName}</option>
      </c:forEach>
    </select>
</div></td>
<td><div id='corporate'>
 <select id='corpotrips' class="multiselect" multiple="multiple" name="tripNumber">

    </select>
</div></td>
<td><div id='deadbills'>
 <select class="multiselect" multiple="multiple" name="tripNumber">

        <c:forEach var="bills" items="${deadbillTrips}">
    <option value="${bills.tripNumber}">${bills.tripNumber}</option>
      </c:forEach>
    </select>
</div></td>
        </tr>
        </table>

Controller

@RequestMapping(value="/companynames", method=RequestMethod.GET)
    public @ResponseBody List<TripSheet> getEnvironmentNames(HttpServletRequest request,
               HttpServletResponse response, @RequestParam String company) {
        List<TripSheet> myList = this.tripSheetService.getCompanyByName(company);
         return myList;
    }

score 0 · Answer 1 · answered Jul 12 '17 at 13:42

you must use an ajax call on clicking the second dropdown item. you can check this example for calling and ajax request for spring mvc. after that in your ajax success method you can use jquery to add variable to dropdown list.here is an example for adding options into dropdown menu.

how to get the values list from Spring MVC Controller to jsp page on selecting an option in dropdown

1 Answers1