Question

Hi I am wondering how to create dynamic drop down lists that get refined after the selection of a value in another drop down list.

For example, if I have two drop down lists Customer Name and Customer Country and I select a certain Customer Name, I only want to see the corresponding Customer Countries.

Using a query:

public List<Customer> getAllCustomerCountries(customerName) {
    return this.sessionFactory
            .getCurrentSession()
            .createQuery(
                    "select distinct customerCountry from Customer where 
                     customerName=:name").setParameter("name", customerName)
                    .list();
}

I can get the corresponding Countries but how do I pass on the input value customerName when it is selected in its own drop down list?

here is the code I’m using for the customerName drop down list:

            <tr>
                <td>Customer Name</td>
                <td><form:select path="customerName">
                    <form:option value="" label="--- Select ---" />
                    <form:options items="${customerNameList}" />
                    </form:select>
                </td>
                <td><form:errors path="customerName" cssClass="error" /></td>
            </tr>

In the controller the lists are populated by:

    model.addAttribute("customerNameList",
            customerService.listAllCustomerNames());
    model.addAttribute("customerCountryList",
            customerService.listAllCustomerCountries());

Thank you for your help!

/D

Update

Ok, so I have now used JavaScript to submit the page when a CustomerName is chosen so that a refined list list is loaded for the CustomerCountry drop down box.

Here is part of the jsp including the script:

        <script>
            function repopulate(){  
                document.getElementById("hasId").value ="true";
                alert("You selected : " + document.getElementById("hasId").value);
                document.deliveryForm.submit();

            }
        </script>

<!-- ... -->        

                <tr>
                    <td><form:hidden id="hasId" path="hasCustomerName" value="false"/></td>
                </tr>

            <tr>
                <td>Customer Name</td>
                <td><form:select path="customerName" onChange="repopulate()">
                    <form:option value="" label="--- Select ---" />
                    <form:options items="${customerNameList}" />
                    </form:select>
                </td>
                <td><form:errors path="customerName" cssClass="error" /></td>
            </tr>

And here is part of the controller:

@RequestMapping(value = "/add", method = RequestMethod.GET)
    public String getDelivery(ModelMap model) {

        DeliveryDto deliveryDto = new DeliveryDto();

        model.addAttribute("deliveryDtoAttribute", deliveryDto)

        model.addAttribute("customerNameList",
                customerService.listAllCustomerNames());
        model.addAttribute("customerCountryList", null);


        return "new-delivery";
    }



    @RequestMapping(value = "/add", method = RequestMethod.POST)
    public String postDelivery(
            @ModelAttribute("deliveryDtoAttribute") @Valid DeliveryDto deliveryDto,
            BindingResult result, ModelMap model) {

        if (deliveryDto.getHasCustomerName() == "true"){

            model.addAttribute("deliveryDtoAttribute", deliveryDto); 

            model.addAttribute("customerNameList",
                    customerService.listAllCustomerNames());
            model.addAttribute("customerCountryList",
                    customerService.listAllCustomerCountries(deliveryDto.getCustomerName()));

            return "new-delivery";
        }




        if (result.hasErrors()) {
            model.addAttribute("deliveryDtoAttribute", deliveryDto); 
            model.addAttribute("customerTargetIdList",
                    customerService.listAllCustomerTargetIds());
            model.addAttribute("customerNameList",
                    customerService.listAllCustomerNames());
            model.addAttribute("customerCountryList",
                    customerService.listAllCustomerCountries(deliveryDto.getCustomerName()));

        }


        Delivery delivery = new Delivery();

        /* A bunch of setters and to set the values in the delivery object that will be saved */

        deliveryService.createDelivery(delivery);


        return "redirect:/home";

    }

The problem I’m having is that the post method doesn’t stop after the first if-loop and checks for errors and then tries to save the delivery as soon as i select a value in the CustomerName drop down box.

Does anyone know how I can make it so that it only continues on to check for errors (2nd if-loop) and save the delivery when I hit the submit button in the jsp page?

Answer 1

You must add a JavaScript event listener to the select box, which will do one of the following:

• submit the form (after modifying its action attribute), in order for the controller to redisplay the same page but with a different set of countries
• send an AJAX request to the controller with the customer name, and dynamically populate the select box with the set of countries contained in the response. The response could be a JSON array of countries, or an HTML snippet containing the new options of the select box, for example.