Как сделать список одного select зависимым от выбора в другом?

Question

[RomulFobos]

Добрый день.
Есть база данных с двумя таблицами. В одной список отделов, в другой все услуги которые имеются (каждой услуги соответствуем один отдел, который эту услугу оказывает).
На странице выбора услуги, есть два атрибута select. Как сделать, чтобы пользователь в первом выбирал отдел, во втором генерировался список услуг этого отдела?
Есть ли возможность, это сделать только с помощью шаблонизатора thymeleaf? Или JS обязателен? Как примерно это будет выглядеть?

Comments

[Антон]

Слушать событие change (не помню, input для select'а подходит или нет), забирать выбранный value у опшена, аяксом отправлять в обработчик, в обработчике по выбранному значению из БД брать то, что требуется для второго селекта и в теле аякса вставлять в него эти опшены

зы про thymeleaf ничего не знаю

[RomulFobos]

Антон, Эх...знал бы я что такое AJAX( Буду гуглить. Спасибо за направление! Есть хоть в какую сторону копать!

Answer 1

[Орхан Гасанлы]

Добрый день!
Во-первых, backend тут ни причем. Это все решается на стороне front-end.
Я бы сказал, что JS обязателен к использованию, а точнее можно обойтись готовыми библиотеками типа select2 или bootstrap-select
Вот, вариант реализации без js библиотеки
https://stackoverflow.com/questions/4480637/how-to...

Comments

[RomulFobos]

Здравствуйте.
Подскажите, я могу сделать следующим образом? При выборе в select запускается событие и вызывается функция testFunction, которая в переменную X записывает value выбранного поля в select и затем в переменную Y с помощью выражения thymeleaf получает выбранный департамент.
В строке var y = [[${arrayListDepartments.get(x).name}]]; как я могу передать X полученный ранее?
Данная реализация не работает (

function testFunction() {
	            var x = document.getElementById("inputDepartment").value;
	            var y = [[${arrayListDepartments.get(x).name}]];
	            document.getElementById("info").innerHTML = "Вы выбрали департамент: " + y;
            }

[Орхан Гасанлы]

RomulFobos,
Легче конечно же сделать это на клиентской стороне. Условно говоря, отдать все селекты, а дальше в зависимости от выбранного первого селекта отображать селекты зависящие от него.
Если хотите реализовтаь при помощи серверной реализации, то читайте дальше.
Вы можете сделать это следующими способами:
После выбора первого селекта убегает аякс запрос с id или названием выбранного селекта
https://ruseller.com/jquery.php?id=11
На сервере вы находите выбранный элемент и достаете список зависящих от него элементов. Далее можно поступить 2-мя способами:
- либо отдать json, а на клиенте при помощи js считать ответ и создать необходимые селекты
- либо на сервере сформировать часть шаблона при помощи thymeleaf и отдать на клиент. А там уже при помощи js распарсить шаблон и вставить в нужное место

Answer 2

[RomulFobos]

Вообщем получилось сделать следующим образом. На страницу в контроллере добавляю атрибуты со списков всех отделов и всех услуг. В скрипте, вытаскиваю id отдела и затем по списку услуг сравниваю поле id_Отдела услуги с ранее выбранным id. Если совпадает, то добавляю его в select.
Сложность была, в том, что я не знаю JS и плохо знаю возможности thymeleaf.
Всем спасибо за помощь!
html код

<div class="col-sm-6">
            <label for="inputService" class="form-label">Выбранная структурное подразделение</label>
            <select class="form-select" name="inputDepartment" id="inputDepartment" required oninput="testFunction()">
                <option selected disabled value="">Выберите структурное подразделение</option>
                <option th:each="el : ${allDepartments}" th:value="${el.id}" th:text="${el.name}"></option>
            </select>
        </div>
        <div class="col-sm-6">
            <label for="inputService" class="form-label">Выбранная услуга</label>
            <select class="form-select" name="inputService" id="inputService" required disabled>
                <option selected disabled value="">Выберите услугу</option>
                <option></option>
            </select>

Сам скрипт

< script th: inline = "javascript" > function testFunction() {
 	document.getElementById("inputService").removeAttribute("disabled");
 	/*<![CDATA[*/
 	var departments = [];
 	var size = 1 + /*[[${arrayListDepartments.get(arrayListDepartments.size()-1).getId()}]]*/ ;
 	for (var i = 0; i < size; i++) {
 		departments.push("0");
 	}
 	/*[# th:each="elVar : ${arrayListDepartments}"]*/
 	var index = /*[[${elVar.id}]]*/ ;
 	departments[index] = /*[[${elVar.name}]]*/
 		/*[/]*/
 		/*]]>*/
 		var x = document.getElementById("inputDepartment").value;
 	var service = [];
 	/*[# th:each="elServ : ${allServices}"]*/
 	var index_S = /*[[${elServ.department.id}]]*/
 		if (x == index_S) {
 			var var_arr = [];
 			var_arr.push( /*[[${elServ.serviceName}]]*/ , /*[[${elServ.id}]]*/ );
 			service.push(var_arr);
 		}
 	/*[/]*/
 	inputService.options.length = 1;
 	for (var i = 0; i < service.length; i++) {
 		let newOption = new Option(service[i][0], service[i][1], );
 		inputService.append(newOption);
 	}
 } < /script>

Answer 3

[Антон Шаманов]

https://select2.org