0
         <div class="DivRequest">
            <input class="inn" type="text" th:value="${el.fname}" onkeyup="checkParamsEdit()" id="fnameEdit" name="fname" placeholder="Фамилия">
        </div>

        <div class="DivRequest">
            <input class="inn" type="text" th:value="${el.lname}" onkeyup="checkParamsEdit()" id="lnameEdit" name="lname" placeholder="Имя">
        </div>

        <div class="DivRequest">
            <input class="inn" type="text" th:value="${el.pname}" onkeyup="checkParamsEdit()" id="pnameEdit" name="pname" placeholder="Отчество">

        </div>
        
        <div class="DivRequest">
            <select class="inn" onchange=document.getElementById('pnameEdit').value=this.options[this.selectedIndex].value>
                <option disabled selected >ФИО исполнителя</option>
                    <option
                            th:each="staff : ${staffs}"
                            th:value="${staff.lname}+ ' ' +${staff.fname}+ ' ' +${staff.pname}"
                            th:text="${staff.lname}+' '+${staff.fname}+' '+${staff.pname}">
                    </option>
            </select>
        </div>

У меня проект на Spring-Boot с шаблонизатором thymeleaf. В выпадающий список я передаю ФИО из базы данных. Далее, при выборе/клике по ФИО я хочу чтобы оно передавалось в input. В поле фамилия - фамилия, имя - имя и отчество - отчество.

Что можно с этим сделать, куда копать? Можно ли как-то через JS пронумеровать и заполнять. Например 1-й элемент идет в input "Фамилия" 2-ой в "Имя" и 3-й в "Отчество

P.S. Сейчас у меня при клике на ФИО из списка заполняется только один input "Отчество", оно и понятно, так как id указан. Но что можно сделать с остальными полями? введите сюда описание изображения

1
  • 1
    Добавьте в option data-* атрибуты отдельно и заполняйте из них.
    – nazarpunk
    22 окт 2021 в 10:32

1 ответ 1

4

Добавьте в option нужные data-* аттрибуты.

<option
        th:each="staff : ${staffs}"
        th:value="${staff.lname}+ ' ' +${staff.fname}+ ' ' +${staff.pname}"
        th:text="${staff.lname}+' '+${staff.fname}+' '+${staff.pname}"
        th:attr="data-lname=${staff.lname},data-fname=${staff.fname},data-pname=${staff.pname}" 
>
</option>

Чтоб после генерации получилось нечто подобное:

const $fname = document.querySelector('[name=fname]');
const $lname = document.querySelector('[name=lname]');
const $pname = document.querySelector('[name=pname]');

document.querySelector('select').addEventListener(`change`, e => {
  const $option = e.target.options[e.target.selectedIndex];
  $fname.value = $option.dataset.fname;
  $lname.value = $option.dataset.lname;
  $pname.value = $option.dataset.pname;
});
input {
  display: block;
}
<input type="text" name="fname" placeholder="Фамилия">
<input type="text" name="lname" placeholder="Имя">
<input type="text" name="pname" placeholder="Отчество">

<select>
  <option disabled selected hidden>ФИО исполнителя</option>
  <option data-fname="Иванов" data-lname="Иван" data-pname="Иванович">Иванов Иван Иванович</option>
  <option data-fname="Петров" data-lname="Пётр" data-pname="Петрович">Петров Пётр Петрович</option>
  <option data-fname="Сидоров" data-lname="Сидр" data-pname="Сидорович">Сидоров Сидр Сидорович</option>
</select>

3
  • Спасибо большое за ответ! Пока не могу понять почему "th:attr" ругается на дубликат и является ли это следствием того, что страница в браузере не загружается и ссылается как раз таки на строку где повторяется "th:attr" 22 окт 2021 в 15:49
  • @Константин это я документацию недочитал, исправил ответ. Несколько th:attr нельзя делать, значения через запятую указываются.
    – nazarpunk
    22 окт 2021 в 16:39
  • Да, спасибо, я точно также через запятую сделал :))) 22 окт 2021 в 18:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.