HTML, JS, Thymeleaf. Есть ли способ заполнить 3 поля input одновременно согласно ФИО, но ФИО это выпадающий список

Question

         <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 указан. Но что можно сделать с остальными полями?

Answer 1

Добавьте в 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>

БЛОГ НА HUSL

HTML, JS, Thymeleaf. Есть ли способ заполнить 3 поля input одновременно согласно ФИО, но ФИО это выпадающий список

Ответы (1 шт):