Skip to main content
Foi adicionada a tag "jquery"
Link
Fonte Link

Mudar texto do box ao selecionar opção

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>