2012-06-19 4 views
0

Привет, мне интересно, как создавать динамические выпадающие списки, которые уточняются после выбора значения в другом выпадающем списке.Spring MVC уточненный выпадающий список после выбора

Например, если у меня есть два раскрывающихся списков 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

Update

Хорошо, так что я теперь используется JavaScript, чтобы представить страницу, когда CustomerName выбирается так, чтобы рафинированное список список загружается в выпадающем окне CustomerCountry.

Вот часть СПЯ, включая сценарий:

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

    } 

Проблема у меня в том, что метод пост не остановитесь после первого цикла if и проверьте наличие ошибок, а затем попытайтесь сохранить доставку, как только я выберу значение в раскрывающемся списке CustomerName.

Кто-нибудь знает, как я могу это сделать, чтобы он продолжал проверять ошибки (2-й if-loop) и сохранять доставку, когда я нажимаю кнопку отправки на странице jsp?

ответ

2

Вы должны добавить слушатель событий JavaScript в окно выбора, который будет делать одно из следующих действий:

  • отправить форму (после изменения его атрибута действия), для того, чтобы контроллер для перерисовки тех же но с другим набором стран
  • отправляет запрос AJAX контроллеру с именем клиента и динамически заполняет поле выбора набором стран, содержащихся в ответе. Ответ может быть массивом JSON стран или фрагментом HTML, содержащим новые параметры окна выбора, например.
+0

Спасибо за ваш ответ, это работает, но у меня большая ошибка (я, вероятно, не сделал это точно так, как вы предполагали). См. Мое обновление. еще раз спасибо – dlinx90

Смежные вопросы