Tenho o seguinte código, mas estou com dúvidas como faço o texto mudar conforme a seleção. Eu queria que quando fosse selecionado, por exemplo, o usuário Marcyen como goleiro aparecesse um texto embaixo do ícone alaranjado de goleiro com o usuário escolhido e isso mudaria de acordo com a opção escolhida.
.campoo {
background-image: url(https://i.imgur.com/T3ooBmR.png);
width: 626px;
height: 406px;
position: relative;
left: 14px;
top: 50px;
border-radius: 8px;
background-size: cover;
margin-bottom: 50px;
background-repeat: no-repeat;
}
.campoo img.goleiro-1 {
left: 35px;
top: 125px;
position: absolute;
-webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
.campoo img.zagueiro-1 {
left: 205px;
top: 125px;
position: absolute;
-webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
.campoo img.meiodecampo-1 {
left: 425px;
top: 25px;
position: absolute;
-webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
.campoo img.atacante-1 {
left: 425px;
top: 195px;
position: absolute;
-webkit-filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
div.selection {
}
<div class="campoo">
<input style="display:inline-block; opacity: 0;" class="apresenta <?php echo $status;?>" type="text" id="file" name="nome" value="<?php echo $login_cookie; ?>" required readonly><br />
<img class="goleiro-1 avatars" src="https://cartolastats.com.br/static/img/goleiro.png" data-toggle="tooltip" data-placement="top" title="Goleiro" alt="Error">
<img class="zagueiro-1 avatars" src="https://cartolastats.com.br/static/img/zagueiro.png" data-toggle="tooltip" data-placement="top" title="Zagueiro" alt="Error">
<img class="meiodecampo-1 avatars" src="https://cartolastats.com.br/static/img/meia.png" data-toggle="tooltip" data-placement="top" title="Meia" alt="Error">
<img class="atacante-1 avatars" src="https://cartolastats.com.br/static/img/atacante.png" data-toggle="tooltip" data-placement="top" title="Atacante" alt="Error"> </div>
<div class="selection"> Goleiro <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/QM7yhDs.png">
<select class="s_goleiro-1 jogadores" name="goleiro">
<option value="Marcyen">Marcyen</option>
<option value="Konan">Konan</option>
<option value="Jaegar">Jaegar</option>
<option value="Aquiles">Aquiles</option>
</select></div>
<div class="selection"> Zagueiro <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/VaZ3naC.png">
<select class="s_zagueiro-1 jogadores" name="zagueiro">
<option value="Ginter">Ginter</option>
<option value="LeonGoretzka">LeonGoretzka</option>
<option value="Asphyxia">Asphyxia</option>
<option value="Namour">Namour</option>
<option value="Soldado">Soldado</option>
<option value="GangplankMain">GangplankMain</option>
</select></div>
<div class="selection"> MEIA <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/TQZAS6Z.png">
<select class="s_meiodecampo-1 jogadores" name="meiodecampo">
<option value="RagnarLothbrok">RagnarLothbrok</option>
<option value="Nayhoff">Nayhoff</option>
<option value="Coutinho">Coutinho</option>
<option value="lDaniCeballos">lDaniCeballos</option>
<option value="Huawey-Bito">Huawey-Bito</option>
</select></div>
<div class="selection"> Atacante <img style="float: left;width: 25px;height: 25px;" src="https://i.imgur.com/uJaEZKD.png">
<select class="s_atacante-1 jogadores" name="atacante">
<option value="DiogoAlmeida">DiogoAlmeida</option>
<option value="MarcusRashford">MarcusRashford</option>
<option value="Aleix">Aleix</option>
<option value="Manuu">Manuu</option>
<option value="Cesarop">Cesarop</option>
<option value="Xmithie">Xmithie</option>
</select></div></div>