Question

您好我想知道如何创建动态下拉列表，这些列表在另一个下拉列表中选择值后会得到改进。

例如，如果我有两个下拉列表Customer Name和Customer Country，并且我选择了某个Customer Name，我只想查看相应的客户国家/地区。

使用查询：

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

我可以获得相应的国家/地区，但如果在自己的下拉列表中选择了输入值customerName，该如何传递它？

这是我用于customerName下拉列表的代码：

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

在控制器中，列表填充为：

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

感谢您的帮助！

/ d

更新

好的，所以我现在使用JavaScript在选择CustomerName时提交页面，以便为CustomerCountry下拉框加载精炼列表。

以下是jsp的一部分，包括脚本：

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

这是控制器的一部分：

@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";

    }

我遇到的问题是post方法在第一个if循环后没有停止并检查错误，然后在CustomerName drop中选择一个值后立即尝试保存传递下框。

有没有人知道如何才能让它继续检查错误（第二个if-loop）并在点击jsp页面中的提交按钮时保存交付？

Answer 1

您必须向选择框添加JavaScript事件侦听器，该选择框将执行以下操作之一：

提交表单（修改其操作属性后），以便控制器重新显示同一页面但使用不同的国家/地区
使用客户名称向控制器发送AJAX请求，并使用响应中包含的国家/地区动态填充选择框。例如，响应可以是国家/地区的JSON数组，也可以是包含选择框新选项的HTML代码段。

选择后，Spring MVC精简下拉列表

1 个答案: