Spring + Thymeleaf. Как создать зависимые выпадающие списки

@Yabloko · Регистрация: 12.08.2015

Студворк — интернет-сервис помощи студентам

Я новичок и бьюсь уже две недели. Нужно создать выпадающие списки, например от выбора страны во втором списке динамически появлялись города. И у меня это не получается.
Я использую JQuery и thymleaf.
Видимо надо добавить класс со списком городов, но какой код и как он должен подгружаться в index.html не знаю. Подскажите пожалуйста, что надо добавить или удалить в коде.

CountryRepository.java

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package com.example.demo;
 
import java.util.ArrayList;
import java.util.List;
 
public class CountryRepository {
 
    private String country;
 
    public List<String> listCountries;
 
    public CountryRepository() {
        listCountries = new ArrayList<>();
        listCountries.add("Brazil");
        listCountries.add("France");
        listCountries.add("Germany");
        listCountries.add("India");
    }
 
    public String getCountry() {
        return this.country;
    }
}

WebController.java

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.example.demo;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
@RequestMapping("/countries")
public class WebController {
 
    @RequestMapping("/showForm")
    public String showForm(Model model) {
        CountryRepository theCountryRepository = new CountryRepository();
        model.addAttribute("country", theCountryRepository);
        return "index";
    }
 
}

index.html

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <script src="webjars/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
 
        $(document).ready(function() {
            $('#country_id').change(function()
            {   getStates();
            });
        });
        function getStates(){
            $.ajax("/showForm", {countryId: $('#country_id').val()},function(data) {
                    var html = '';
                    var len = data.length;
                    for(var i=0; i<len; i++){
                        html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                    }
                    $('#city_id').append(html);
                }
            );
        }
 
    </script>
 
</head>
 
<body>
<form>
 
    <select name="country" id="country_id" th:field="${country.country}">
        <option th:each="entry : ${country.listCountries}"
                th:value="${entry}"
                th:text="${entry}">
        </option>
    </select>
 
 
            <select name="city" id="city_id" disabled="disabled" >
 
            </select>
 
    <input type="submit"/>
</form>
</body>
 
 
</html>

Как оно выглядит

Spring + Thymeleaf. Как создать зависимые выпадающие списки

@iSmokeJC · 24.05.2019, 23:43

Сообщение от Yabloko

надо добавить класс со списком городов

Надо добавить метод в контроллер, который по названию страны вернет список городов. Аяксом в него передаешь страну, получаешь города и заполняешь соотв. вып.список. JQuery ессно.
А вот откуда контроллер возьмет список городов - другой вопрос. По идее, нужно создать класс Country, в числе полей которого есть список городов данной страны. И в репозитории хранить не список названий стран, а список экземпляров класса Страна. Репозиторий возвращает страну по имени например, в сервисе из нее берешь список городов и возвращаешь на вью.

@xoraxax · 25.05.2019, 00:22

репозиторий во вьюху отдавать не надо - отдавай готовые данные

@Yabloko · 25.05.2019, 22:10 **[ТС]**

Спасибо всем за ответ! Кое что получается.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@xoraxax 3639 / 2971 / 918 Регистрация: 05.07.2013 Сообщений: 14,220
	25.05.2019, 00:22
	репозиторий во вьюху отдавать не надо - отдавай готовые данные 0

@Yabloko 0 / 0 / 0 Регистрация: 12.08.2015 Сообщений: 11
	25.05.2019, 22:10 [ТС]
	Спасибо всем за ответ! Кое что получается. 0