Для предотвращения жесткого кодирования возможных опций может использоваться прослушиватель событий, который прослушивает изменения выбора. Это можно объединить путем фильтрации и генерации HTML для интерактивного взаимодействия. Оформить заказ демо ниже:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>NBA Draft Prediction</h1>
<div id="filters">
</div>
<div id="results">
</div>
</body>
<script>
var playersByPosition = [
{
name: 'Center',
players: [
{name: 'player1', image: 'https://source.unsplash.com/random/80x80'},
{name: 'player2', image: 'https://source.unsplash.com/random/80x80'},
],
},
{
name: 'Scoring Forward',
players: [
{name: 'player3', image: 'https://source.unsplash.com/random/80x80'},
{name: 'player4', image: 'https://source.unsplash.com/random/80x80'},
],
},
{
name: 'Slashing Forward',
players: [
{name: 'player5', image: 'https://source.unsplash.com/random/80x80'},
{name: 'player6', image: 'https://source.unsplash.com/random/80x80'},
],
},
{
name: 'Two Way Forward',
players: [
{name: 'player7', image: 'https://source.unsplash.com/random/80x80'},
{name: 'player8', image: 'https://source.unsplash.com/random/80x80'},
],
},
{
name: 'Combo Guard',
players: [
{name: 'player9', image: 'https://source.unsplash.com/random/80x80'},
{name: 'player10', image: 'https://source.unsplash.com/random/80x80'},
],
},
{
name: 'Scoring Guard',
players: [
{name: 'player11', image: 'https://source.unsplash.com/random/80x80'},
{name: 'player12', image: 'https://source.unsplash.com/random/80x80'},
],
},
{
name: 'Passing Guard',
players: [
{name: 'player13', image: 'https://source.unsplash.com/random/80x80'},
{name: 'player14', image: 'https://source.unsplash.com/random/80x80'},
],
},
{
name: 'Play Maker',
players: [
{name: 'player15', image: 'https://source.unsplash.com/random/80x80'},
{name: 'player16', image: 'https://source.unsplash.com/random/80x80'},
],
}
];
var buildSelectors = function(positions){
var options = positions.map(function(position){
return '<option>' + position.name + '</option>';
}).join('');
return '<select class="filter" name="positions">'+options+'</select>';
}
var filtersElem = document.querySelector('#filters');
var resultsElem = document.querySelector('#results');
filtersElem.innerHTML = buildSelectors(playersByPosition);
var filterResultsForFilterValue = function(value){
var selectedPosition = playersByPosition.find(function(position){
return position.name === value;
});
var formattedResults = selectedPosition.players.map(function(player){
return '<div><h3>Player: ' + player.name + '</h3><img src="'+player.image+'"</div>';
}).join('');
resultsElem.innerHTML = formattedResults;
};
document.querySelectorAll('.filter').forEach(function (filter) {
filter.addEventListener('change',function (e) {
var selectedPosition = playersByPosition.find(function(position){
return position.name === e.currentTarget.value;
});
filterResultsForFilterValue(selectedPosition.name)
})
})
filterResultsForFilterValue(playersByPosition[0].name)
</script>
</html>