Criar um select menu com Spring boot thymeleaf | Programação

Pessoal, eu estou tentando criar um select menu de países, que são definidos a partir do código de telefone que estão presente dentro de uma tabela. A tabela possui o nome da pessoa e o telefone, dependendo do inicio do telefone eu associo a um país. Eu gostaria que quando o país fosse selecionado, aparecesse apenas os nomes e telefones do país selecionado. Vou mostrar minhas classes e métodos:

Essa é a página html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>PhoneList</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div id="phoneList">      
<select th:field="*{customers}">    
             <option value=""> -- </option>
          <option value ="customer" th:each="customer : ${customers}"
           th:utext="${customer.country}"/>
</select>


    <table class="table table-hover">


        <thead>

        <tr>
            <th>Name</th>
            <th>Telephone</th>
            <th>Country</th> 
        </tr>
        </thead>
        <tr th:each="customer : ${customers}">
            <td> <span th:text="${customer.name}"></span> </td>
            <td> <span th:text="${customer.phone}"></span> </td>
             <td> <span th:text="${customer.country}"></span> </td> 


        </tr>
    </table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

O método do controller da página:

    @RequestMapping(value="phonelist", method=RequestMethod.GET)
    public ModelAndView listar() {
        List<Customer> customer = dao.customerList();
        ModelAndView modelAndView = new ModelAndView("phonelist");
        for (Customer c : customer) {
            if(c.getPhone().contains("(237)")){
                c.setCountry(c.getCountryList().get(0));                
            }
            else if(c.getPhone().contains("(251)")){
                c.setCountry(c.getCountryList().get(1));                
            }
            else if(c.getPhone().contains("(212)")){
                c.setCountry(c.getCountryList().get(2));                            
            }
            else if(c.getPhone().contains("(258)")){
                c.setCountry(c.getCountryList().get(3));                

            }
            else if(c.getPhone().contains("(256)")){
                c.setCountry(c.getCountryList().get(4));                

            }    

        }

        System.out.println(customer.get(0).getCountryList().get(0));

        modelAndView.addObject("countryList", customer.get(0).getCountryList());  

        modelAndView.addObject("customers", customer);
        return modelAndView;
    }

e o método Dao que pega todos os nomes e telefones da tabela customer:

    public List<Customer> customerList() {
        String query = ("select c from customer c");
        List<Customer> customerList = (List<Customer>) manager.createQuery(query).getResultList();

        return customerList;

    }

E classe entity Customer que possui a lista de países:

    @Transient
    private List<String> countrylist = Arrays.asList("Cameroon","Ethiopia","Morocco","Mozambique","Uganda")

O select menu com os países aparece na tela, o que eu quero é quando um país seja selecionado apareça apenas os nomes e telefones associados aquele país.

Mergulhe em programação