@RomulFobos

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

Добрый день.
Есть база данных с двумя таблицами. В одной список отделов, в другой все услуги которые имеются (каждой услуги соответствуем один отдел, который эту услугу оказывает).
На странице выбора услуги, есть два атрибута select. Как сделать, чтобы пользователь в первом выбирал отдел, во втором генерировался список услуг этого отдела?
Есть ли возможность, это сделать только с помощью шаблонизатора thymeleaf? Или JS обязателен? Как примерно это будет выглядеть?
  • Вопрос задан
  • 89 просмотров
Решения вопроса 2
Добрый день!
Во-первых, backend тут ни причем. Это все решается на стороне front-end.
Я бы сказал, что JS обязателен к использованию, а точнее можно обойтись готовыми библиотеками типа select2 или bootstrap-select
Вот, вариант реализации без js библиотеки
https://stackoverflow.com/questions/4480637/how-to...
Ответ написан
@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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы