title: How to populate select element in thymeleaf springboot?
body: <p>I am writing a web application using thymeleaf, springboot. I have one model class with id, name, address, state and district fields. I have 3 tables <strong>user table</strong>, <strong>state table</strong> with id, state_name, state_code, and <strong>district table</strong> with id, district_code, district_name, state_code. </p>
  
  <p>How to map List of states to user table state field?. </p>
  
  <p>Q1. When I load my newrecord view it should fatch all record from state table and populate in select element?.</p>
  
  <p>Q2. When I select state from select fatch all dstrict list of that state?.</p>
  
  <p>Q3. When I open same record in edit mode state and district list show its default value?.</p>
  
  <p>Controller</p>
  
  <pre><code>@RequestMapping("user/new")
  public String newUser(Model model){
      model.addAttribute("user", new User());
      return "userform";
  }
  
  @RequestMapping("user/edit/{id}")
  public String update(@PathVariable Integer id, Model model){
      model.addAttribute("user", userService.getProductById(id));
      return "userform";
  }
  </code></pre>
  
  <p>Model</p>
  
  <pre><code>@Entity
  public class Product {
  @Id
  @GeneratedValue(strategy = GenerationType.AUTO)
  private Integer id;
  private String name;
  private String address;
  private String state;
  private String dist;
  //getter setter
  }
  
  public class State {
  @Id
  @GeneratedValue(strategy = GenerationType.AUTO)
  private Integer state_id;
  private String state_name;
  private String state_code;
  }
  </code></pre>
  
  <p>Thymeleaf view</p>
  
  <pre><code>&lt;html xmlns:th="http://www.thymeleaf.org"&gt;
  &lt;head lang="en"&gt; 
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
    &lt;h2&gt;User Details&lt;/h2&gt;
  &lt;div&gt;
      &lt;form class="form-horizontal" th:object="${user}" th:action="@{/user}" method="post"&gt;
          &lt;input type="hidden" th:field="*{id}"/&gt;            
          &lt;div class="form-group"&gt;
              &lt;label class="col-sm-2 control-label"&gt;Name:&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
               &lt;input type="text" class="form-control" th:field="*{name}"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label class="col-sm-2 control-label"&gt;Address:&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
              &lt;input type="text" class="form-control" th:field="*{address}"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  **//NOTE:- These select list not working I am able to display above information not this list**
          *&lt;div class="form-group"&gt;
              &lt;label class="col-sm-2 control-label"&gt;State:&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
                &lt;select class="form-control" name="selectState" th:field="*{state}" &gt;
              &lt;option th:each="sopt:${state}" th:value="?" th:text="?"&gt;State&lt;/option&gt;
               &lt;/select&gt;
              &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label class="col-sm-2 control-label"&gt;Dist:&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
                &lt;select class="form-control" name="selectDistrict" th:field="*{dist}" &gt;
              &lt;option th:each="sopt:${dist}" th:value="?" th:text="?"&gt;Dist&lt;/option&gt;
               &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;*
          &lt;div class="row"&gt;
              &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>