How do I populate a drop down with a list using thymeleaf and spring

Question

I need to populate a drop down with all the values within a list of strings.

Controller Class

@RequestMapping(value = "/generateIds", method = RequestMethod.GET)
public String launchPage(Model model) {
    List<Municipality> municipalities = rCountryService.finaAllMunicipalities();
    //assume the list is populated with values
    List<String> countryName = new ArrayList<String>();
    for(int i=0; i<municipalities.size(); i++) {
        countryName.add(municipalities.get(i).getCountry().toString());
    }
    model.addAttribute("countryName ", countryName );

    return "generateIds";
}

I didn't know where to start for the HTML so I started with this

<select th:field="*{countryName }">
    <option value="default">Select a country</option>
    <option th:each="${countryName }" th:value="${countryName }"th:text="${countryName }"/>
</select>

What should my html/controller look like to add all of the elements of the list as drop down options?

Thanks in advance!

score 39 · Accepted Answer · edited Dec 04 '18 at 21:08

This is how I populate the drop down list.I think it may help to you get some idea about it.

Controller

List<Operator> operators =  operatorService.getAllOperaors()
model.addAttribute("operators", operators);

Model

  @Entity
  @Table(name = "operator")
  public class Operator {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id")
    @JsonIgnore
    private Long id;

    @NotBlank(message="operator Name cannot be empty")
    @Column(name = "operator_name", nullable = false)
    private String operatorName;

    getters and setters ...

}

View

<div class="form-group blu-margin">
    <select class="form-control" th:field="${operator.opeId}"  id="dropOperator">
    <option value="0">select operator</option>
    <option th:each="operator : ${operators}" th:value="${operator.id}" th:text="${operator.operatorName}"></option>
    </select>
</div>

`th:text="select operator"` gives error "TemplateProcessingException: Could not parse as expression". +1 anyway ;) — naXa stands with Ukraine, Oct 18 '18 at 11:03
If list size is only 1, how can i select default first value onload? — Aakash Patel, Dec 21 '20 at 05:36

Thanongsak Chamung · Answer 2 · 2016-10-26T11:50:42.443

17

First thank to your question and answer! I've done with this solution.

My Model

@Entity
@Table(name = "test")
public class Test {

    @Id
    private String testCode;
    private String testName;
    private int price;

    public Test() {}

    public Test(String testCode, String testName, int price) {
        this.testCode = testCode;
        this.testName = testName;
        this.price = price;
    }

    public String getTestCode() {
        return testCode;
    }

    public String getTestName() {
        return testName;
    }

    public int getPrice() {
        return price;
    }
}

My View

    List<Test> test = new ArrayList<>();
    model.addAttribute("test", test);
    List<Test> tests = testRepository.findAll();
    model.addAttribute("tests", tests);

My HTML

<div class="col-lg-3" th:object="${test}">
    <select class="form-control" id="testOrder" name="testOrder">
        <option value="">Select Test Order</option>
        <option th:each="test : ${tests}"
                th:value="${test.testCode}"
                th:text="${test.testCode}+' : '+${test.testName}"></option>
    </select>
</div>

My Result

Image - tymeleaf dropdown from model

edited Oct 26 '16 at 11:50

answered Oct 26 '16 at 04:07

Thanongsak Chamung

311
2
5

Your List test = new ArrayList<>(); is doing nothing, therefore, there is no need to write such a bogus code. These lines of code will however do the trick for you: List tests = testRepository.findAll(); model.addAttribute("tests", tests); Also, it is good to use your service instead of using the repository. – olasammy May 02 '18 at 08:19
Do you have to use a list? – Eamon Mac Jul 31 '20 at 17:55
Yes I user a list. – Thanongsak Chamung Aug 02 '20 at 00:45
Ok, and for POST, how do you save the selected item from dropdown to database? – Eamon Mac Aug 03 '20 at 23:48

score 4 · Answer 3 · answered May 24 '19 at 06:51

4

For generating dropdown for the list of String returned in model you just need to use these lines. You don't need to create any model class with extra getter and setter methods. Your code is correct, you just missed the variable name for storing the value returned in countryName list in th:each.

<select th:field="*{countryName}">
<option value="">Select Country</option>
<option th:each="country : ${countryName}" th:value="${country}" th:text="${country}"></option>
</select>

answered May 24 '19 at 06:51

Ranveer Singh

41
1
4

I got it to work as Raneer said but it wasn't easy. I think the complications come in depending on how one arrives at the original list that creates the array list. – Richard Bradley Smith Apr 25 '20 at 23:49
How would we an additional option if the th:field value isn't contained in the country list? Thanks – Justin Jones Oct 13 '21 at 21:19

score 0 · Answer 4 · answered Dec 15 '18 at 05:31

0

You only need this code in your view.

List<Test> tests = testRepository.findAll();
model.addAttribute("tests", tests);

answered Dec 15 '18 at 05:31

Lee N

29
9

score 0 · Answer 5 · answered Dec 18 '19 at 09:55

I have implemented a similar where i need to populate the dropdown from the database. For that I retrieved the data from the controller as below

@GetMapping("/addexpense")
public String addExpense(Expense expense,Model model){
    model.addAttribute("categories",categoryRepo.findAll());
    return "addExpense";
}

Then in the thymeleaf I have used the below code.

<div class="form-group col-md-8">
<label  class="col-form-label">Category </label>
<select  id="category" name="category" th:field="*{category.id}" >
<option th:each="category : ${categories}" th:value="${category.id}" th:utext="${category.name}"/>
</select>
</div>

How do I populate a drop down with a list using thymeleaf and spring

5 Answers5

Linked