title: Dynamic dropdowns using thymeleaf, spring boot
body: <p>I have 3 dropdowns(one is populate with cities, one with agencies and one with services). If I select one city, the second dropdown should load the data(agencies), and if i select one agency, the 3 dropdown should load data(services). I am able to populate the first dropdown(cities), but I don't know how to populate the second and third. </p>
  
  <p>Should i write a controller for each dropdown and return the value? If the answer is yes, how can I return the value?
  I've read that Thymeleaf is not a component technology but a template technology like JSP. So there is not components or built-in mechanism in Thymeleaf to do client-server communication. 
  So I need to program that communication using plain old HTML forms or using AJAX calls. 
  How can I program it using plain old HTML?</p>
  
  <p>I tried using forms, but I click submit only once, it is not what I need.
  I read the posts about dropdowns, but couldn't find anything helpful. I saw that the easy way is to use jQuery, but I don't know jQuery.
  Is there a way I can do this using only thymeleaf and spring boot?
  Thanks!
  I will post my code below.</p>
  
  <p>appointment.html</p>
  
  <pre><code>&lt;form th:action="@{/appointment/create}" method="post" id="appointmentForm"&gt;
              &lt;input type="hidden" name="id" th:value="${appointment.id}"/&gt;
  &lt;div class="form-group"&gt;
                  &lt;label for="location"&gt;Alege orasul:&lt;/label&gt;
                  &lt;select class="form-control" required="required" 
  th:value="${appointment.location}" name="location" id="location"&gt;
                      &lt;option disabled="disabled" selected="selected" &gt; -- 
  alege orasul --&lt;/option&gt;
                      &lt;option th:each="city : ${cities}" th:value="${city.id}" 
  th:text="${city.name}" &gt;&lt;/option&gt;
              &lt;/select&gt;
              &lt;/div&gt;
              &lt;/form&gt;
  
              &lt;form th:action="@{/appointment/agency}" method="post" id="appointmentForm"&gt;
              &lt;input type="hidden" name="id" th:value="${appointment.id}"/&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="location"&gt;Alege agentia:&lt;/label&gt;
                  &lt;select class="form-control" th:value="${appointment.agency}" name="agency" id="agency" required="required"&gt;
                      &lt;option disabled="disabled" selected="selected" &gt; -- alege agentia --&lt;/option&gt;
                      &lt;option th:each="agency : ${agencies}" th:value="${agency.id}" th:text="${agency.name}" &gt;&lt;/option&gt;
  
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;/form&gt;
              &lt;form th:action="@{/appointment/service}" method="post" id="appointmentForm"&gt;
              &lt;input type="hidden" name="id" th:value="${appointment.id}"/&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="location"&gt;Alege serviciul:&lt;/label&gt;
                  &lt;select class="form-control" th:value="${appointment.service}" name="service" id="service" required="required"&gt;
                      &lt;option disabled="disabled" selected="selected" &gt; -- alege serviciul --&lt;/option&gt;
                      &lt;option th:each="service : ${services}" th:value="${service.id}" th:text="${service.name}" &gt;&lt;/option&gt;
  
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>AppController.java</p>
  
  <pre><code>@Controller
  @RequestMapping("/appointment")
  public class AppointmentController {
  
  @Autowired
  UserService userService;    
  AppointmentService appointmentService;  
  CityService cityService;
  AgencyService agencyService;
  SerService serService;
  private ModelAndView mav;
  
  @RequestMapping(value="/create", method=RequestMethod.GET)
  public String createAppointmentPost(Model model, @ModelAttribute("city") City 
  city, @ModelAttribute("agency") Agency agency){
  
  
      Appointment appointment=new Appointment();
      model.addAttribute("appointment", appointment);
      model.addAttribute("dateString", "");
      model.addAttribute("cities", cityService.findAll());
      //getAllAgencies(model, city);
      getAllServices(model,agency);
      return "appointment";
  }
  
  @RequestMapping(value="/agency", method=RequestMethod.GET)
  public String getAllAgencies(Model model, @ModelAttribute("city") City city){
      model.addAttribute("agencies", agencyService.listAllAgencies(city));
      return "redirect:/appointment/create";
  }
  public void getAllServices(Model model, @ModelAttribute("agency") Agency 
  agency){
      if(agency==null){
          return;
      }
      model.addAttribute("services", serService.listAllServices(agency));
  
  }
  </code></pre>