Вывести список конкурсантов в соответствии с выбранным подразделением?

Для того чтобы вывести список конкурсантов в соответствии с выбранным подразделением, вам понадобится использовать JavaScript вместе с HTML и CSS для создания пользовательского интерфейса.

Вот пример, как можно решить эту задачу:

HTML:

<select id="department-select">
  <option value="department1">Подразделение 1</option>
  <option value="department2">Подразделение 2</option>
  <option value="department3">Подразделение 3</option>
</select>

<ul id="contestants-list"></ul>

JavaScript:

// Создаем массив объектов с конкурсантами, каждый объект содержит имя и подразделение конкурсанта
var contestants = [
  { name: "Иван", department: "department1" },
  { name: "Мария", department: "department2" },
  { name: "Александр", department: "department1" },
  { name: "Елена", department: "department3" },
  // ... добавьте сюда остальных конкурсантов
];

// Определяем функцию для обновления списка конкурсантов
function updateContestantsList() {
  // Получаем выбранное значение из списка подразделений
  var selectedDepartment = document.getElementById("department-select").value;
  
  // Очищаем список конкурсантов
  var contestantsList = document.getElementById("contestants-list");
  contestantsList.innerHTML = "";
  
  // Фильтруем массив конкурсантов по выбранному подразделению
  var filteredContestants = contestants.filter(function(contestant) {
    return contestant.department === selectedDepartment;
  });
  
  // Создаем элементы списка и добавляем их в HTML
  filteredContestants.forEach(function(contestant) {
    var listItem = document.createElement("li");
    listItem.textContent = contestant.name;
    contestantsList.appendChild(listItem);
  });
}

// Добавляем обработчик события для изменения выбранного значения в списке подразделений
document.getElementById("department-select").addEventListener("change", updateContestantsList);

// Обновляем список конкурсантов при загрузке страницы
updateContestantsList();

CSS:

/* По желанию добавьте стили для списка конкурсантов */

Обратите внимание, что в этом примере мы создали массив объектов contestants, в котором содержится информация о каждом конкурсанте. Затем мы определяем функцию updateContestantsList, которая вызывается при изменении выбранного значения в списке подразделений. В этой функции мы получаем выбранное значение, фильтруем массив contestants и создаем элементы списка, которые добавляем в HTML.

Таким образом, при изменении значения в списке подразделений, список конкурсантов будет обновлен и будет содержать только тех, чье подразделение соответствует выбранному значению.