I have had a go at refactoring your code.
A general rule of thumb I would say is that you want to keep functions relatively short and simple. It makes them a lot easier to read, debug and reuse.
Templates
One way to do that is to move your templates out of your display function like so — These could even be imported in as their own views module.
const coachTemplate = function (squadMember) {
return `<div class="card">
<div class="profile-img">
<img src=${squadMember.profileImg} alt=${squadMember.name} />
</div>
<div class="info">
<p class="card-info"><span>Name:</span> ${squadMember.name} </p>
<p class="card-info"><span>age:</span> ${squadMember.age} </p>
<p class="card-info"><span>position:</span> ${squadMember.position}</p>
<div class="country">
<p><span>Country:</span> ${squadMember.country}</p>
<img class="flag" src=${squadMember.flag} alt=${squadMember.flag} />
</div>
</div>
</div>`
}
const playerTemplate = function (squadMember) {
return `<div class="card">
<div class="profile-img">
<img src=${squadMember.profileImg} alt=${squadMember.name} />
</div>
<div class="info">
<p class="card-info"><span>Name:</span> ${squadMember.name} </p>
<p class="card-info"><span>age:</span> ${squadMember.age}</p>
<p class="card-info"><span>height:</span> ${squadMember.height}</p>
<p class="card-info"><span>position:</span> ${squadMember.position}</p>
<p class="card-info"><span>shirt no:</span> ${squadMember.shirtNo}</p>
<div class="country">
<p><span>Country:</span> ${squadMember.country}</p>
<img class="flag" src=${squadMember.flag} alt=${squadMember.flag} />
</div>
</div>
</div>`
}
renderTeamCards
The first thing I have done is simplify the parameters down from ‘managers’ and ‘players’ to just ‘squad’.
I have also made use of array.reduce instead of ‘map’. It is a great tool for assembling strings and worth looking into.
It saves us using map twice, joining and concatenating.
I have also made use of the ternary operator instead of ifs and elses
// Display the team cards
function renderTeamCards (squad = []) {
// We can use array's reduce to build our entire HTML
const squadCards = squad.reduce(
function (squadHTML, squadMember) {
return (squadMember.position === 'coach')
? `${squadHTML}${coachTemplate(squadMember)}`
: `${squadHTML}${playerTemplate(squadMember)}`
},
'' /* squadHTML starts as an empty string */
)
sectionCenter.innerHTML = squadCards
}
This reduces our displayTeamCards down from 45 lines to a more manageable 14 lines
optionsHandler
For the selectOption eventListener I have created a separate handler function instead of the anonymous function.
so instead of
selectOption.addEventListener('change',function(....
we have
function optionsHandler (event) {
...code here
}
selectOption.addEventListener('change', optionsHandler)
Oh and lastly I have wrapped the code inside of your ‘DomContentLoaded’ callback. This way we keep your code out of the global namespace. Preventing it from overwriting other code/apps etc or from being overwritten itself.
Final code
// ---- managers and players objects ---
// ... objects here
// ---- Squad Templates ----
// ... templates from above here
// Wrap our code and keep it out of the Global namespace
window.addEventListener('DOMContentLoaded', function () {
// selectors
const sectionCenter = document.querySelector('.section-center')
const selectOption = document.querySelector('select')
// making this a separate function we can reuse it as we want
// instead of copying the same code over and over.
// It also keeps optionsHandler cleaner and easier to read.
function filterPositions (position) {
return function (squadMember) {
if (squadMember.position.toLowerCase() === position) {
return squadMember
}
}
}
// options event handler
function optionsHandler (event) {
const position = event.currentTarget.value
// if 'team' then display and return
if (position === 'team') {
// using ...spread to concatenate the arrays
renderTeamCards([...managers, ...players])
return
}
const cards = (position === 'coach')
? managers.filter(filterPositions(position))
: players.filter(filterPositions(position))
renderTeamCards(cards)
}
// Display the team cards
function renderTeamCards (squad = []) {
// We can use array's reduce to build our entire HTML
const squadCards = squad.reduce(
function (squadHTML, squadMember) {
return (squadMember.position === 'coach')
? `${squadHTML}${coachTemplate(squadMember)}`
: `${squadHTML}${playerTemplate(squadMember)}`
},
'' /* squadHTML starts as an empty string */
)
sectionCenter.innerHTML = squadCards
}
// Assign our handler to our change event
selectOption.addEventListener('change', optionsHandler)
renderTeamCards([...managers, ...players])
})
There are still a few things to possibly breakdown 
edit: This is turning into a lengthy post you never asked for, so please feel free to run for the hills.
Reduce example
I thought a further example of reduce might be useful
const fruit = ['apples', 'bananas', 'cantaloupe', 'donuts', 'elderberry']
fruit.reduce(function (accumulator, currentValue) {
return accumulator + '<div>' + currentValue + '</div>'
}, '' /* <- This is accumulator to start with */)
/* for each iteration of the loop
return '' + '<div>apples</div>'
return '<div>apples</div>' + '<div>bananas</div>'
return '<div>apples</div><div>bananas</div>' + '<div>cantaloupe</div>'
return '<div>apples</div><div>bananas</div><div>cantaloupe</div>' + '<div>donuts</div>'
return '<div>apples</div><div>bananas</div><div>cantaloupe</div><div>donuts</div>' + '<div>elderberry</div>'
*/
// Refactor above with a template string
fruit.reduce(function (accumulator, currentValue) {
return `${accumulator}<div>${currentValue.toUpperCase()}</div>\n`
}, '')