Можно так...
<!DOCTYPE html>
<html lang="hy">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body {
margin: 0;
padding: 0;
background: #C1C6D8;
font: 1em Sylfaen,"Arial Unicode MS", Tahoma, Arial, sans-serif;
}
input, select {
background: rgba(255, 255, 255, 0.75);
margin: 0.5em 0;
display: block;
padding: 0.5em;
border: 1px solid #eee;
border-radius: 0.5em;
width: 100%;
box-sizing: border-box;
font: inherit;
}
input[type=text]:valid,
input[type=date]:valid,
input[type=time]:valid,
select:valid {
background-color: #c6f4c6;
border-color: #96d496;
}
.main {
margin: 1em auto;
max-width: 600px;
display: flex;
flex-wrap: wrap;
}
.main > * {
flex: 1;
}
.main > form {
margin: 0 0.5em;
}
.main > .person {
background: #DCDDDD;
max-width: 310px;
padding: 20px 10px;
align-self: flex-start;
}
#person_card {
text-align: center;
border:1px solid #000;
}
</style>
<title>Test</title>
</head>
<body>
<div class="main">
<!-- Form start -->
<form method="post">
<label>
Ընտրեք բաժինը:
<select name="s_section" id="s_section" required></select>
</label>
<label>
Ընտրեք աշխատակցին:
<select name="s_employee" id="s_employee" required></select>
</label>
<label>
Ընտրեք օրը:
<input type="date" title="Ընտրեք օրը" required>
</label>
<label>
Ընտրեք ժամը:
<input type="time" title="Ընտրեք ժամը" required>
</label>
<input type="submit" value="Հաստատել">
</form>
<!-- Person_Card -->
<section class="person">
<div id="person_card" class="person_card">
<h3 class="person_name">նախ ընտրեք մասնագետ</h3>
<p class="person_job"></p>
<img class="person_img">
<p class="person_desc"></p>
</div>
</section>
</div>
<script>
const data = [{
name: 'Արմինե',
job: 'Վարսավիր',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae aspernatur sunt, atque nisi error quasi dolores itaque saepe ullam. Numquam deleniti delectus laboriosam repellendus illo.'
}, {
name: 'Հօվիկ',
job: 'Վարսավիր',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero error mollitia sit modi consectetur, nostrum, ipsam doloribus culpa? Numquam itaque autem repellat. In, ab natus!'
}, {
name: 'Կարեն',
job: 'Վարսավիր',
image: '1.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque nobis placeat eos perspiciatis consectetur accusantium, tempore numquam repudiandae accusamus quisquam, non voluptatum suscipit praesentium distinctio.'
}, {
name: 'Մարինե',
job: 'Դիմահարդար',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum pariatur doloremque quasi quibusdam soluta, sunt illo obcaecati, aspernatur ullam adipisci repellendus eos culpa similique nesciunt?'
}, {
name: 'Սաթենիկ',
job: 'Դիմահարդար',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore error magnam sapiente ab, explicabo nulla architecto temporibus delectus voluptatem, sed voluptatum optio eveniet rerum quaerat.'
}, {
name: 'Գայանե',
job: 'Մատնահարդար',
image: '2.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur voluptatibus nulla culpa nobis, eligendi ipsum assumenda ab cum alias! Ipsa aperiam doloribus alias. Ut, veniam.'
}, {
name: 'Սաթենիկ Կիրակոսյան',
job: 'Մատնահարդար',
image: '1.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit, quos quisquam veritatis corrupti perspiciatis provident fugit debitis cum vel facilis voluptate ratione, nesciunt molestias.'
}, {
name: 'Արտակ',
job: 'Ասեղնաբույժ',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, dignissimos, dolore. Inventore iste libero commodi nulla dolore cum nam minus rerum, earum, dolor blanditiis voluptatem.'
}, {
name: 'Կարինե',
job: 'Մերսող',
image: '3.jpg',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur obcaecati pariatur eaque libero, facere numquam excepturi tempore voluptate id architecto necessitatibus odit nemo aliquid consequatur!'
}];
data.byJob = data.reduce((object, person) => {
if(person.job in object === false) {
object[person.job] = [];
}
object[person.job].push(person);
return object;
}, {});
var jobsElement = document.getElementById("s_section");
var workersElement = document.getElementById("s_employee");
for(const job in data.byJob) {
jobsElement.add(new Option(job));
}
jobsElement.selectedIndex = -1;
jobsElement.onchange = function selectPerson() {
workersElement.innerHTML = "";
var value = data.byJob[this.value];
for (let i = 0; i < value.length; i++)
workersElement.add(new Option(value[i].name));
workersElement.selectedIndex = -1;
};
workersElement.onchange = function () {
const worker = data.filter(worker => worker.name === workersElement.value)[0];
document.querySelector("#person_card .person_name").textContent = worker.name;
document.querySelector("#person_card .person_job").textContent = worker.job;
document.querySelector("#person_card .person_img").src = worker.img;
document.querySelector("#person_card .person_desc").textContent = worker.description;
};
</script>
</body>
</html>