1

こんにちは、別のドロップダウンリストで値を選択した後に洗練される動的なドロップダウンリストを作成する方法を知りたいです。

たとえば、2 つのドロップダウン リストが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 を使用して a が選択されたときにページを送信し、ドロップダウン ボックス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ドロップダウン ボックスで値を選択するとすぐに配信を保存しようとすることです。

jspページで送信ボタンを押したときにエラー（2番目のifループ）のチェックと配信の保存のみを続行するようにする方法を知っている人はいますか?

4

1 に答える 1

3

JavaScript イベント リスナーを選択ボックスに追加する必要があります。これにより、次のいずれかが実行されます。

  • コントローラーが同じページを異なる国のセットで再表示するために、(action 属性を変更した後に) フォームを送信します。
  • 顧客名を使用して AJAX 要求をコントローラーに送信し、応答に含まれる国のセットを選択ボックスに動的に入力します。応答は、たとえば、国の JSON 配列、または選択ボックスの新しいオプションを含む HTML スニペットである可能性があります。
于 2012-06-19T09:52:32.823 に答える