2

Gostaria de que ao usuario clicar no botao do "Tamanho" aparecesse uma imagem de um bolo qualquer junto com o preco que ja consegui.

Meu codigo está assim:

$("#service").change(function() {
  var value = $(this).children("option:selected").val();
  if (value == 1) {
    $("#valor").text("Preço: R$ 70,00");
    //queria add  aqui uma imagem caso ele clicasse aqui
  } else if (value == 2) {
    $("#valor").text("Preço: R$ 100,00");
    //queria add aqui uma imagem caso ele clicasse aqui
  } else if (value == 3) {
    $("#valor").text("Preço: R$ 120,00");
    //queria add aqui uma imagem caso ele clicasse aqui
  } else if (value == 4) {
    $("#valor").text("Preço: R$ 160,00");
    //queria add aqui uma imagem caso ele clicasse aqui
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="service" style="margin: 0 5% 0 13%;" name="service" required class="border-box-contact">
  <option value="" disabled selected>Tamanho</option>
  <option value=1>PP (~1,2kg)</option>
  <option value=2>P (~1,8kg)</option>
  <option value=3>M (~2,5kg)</option>
  <option value=4>G (~3,5kg)</option>
</select>
<br>
<p><span style="display:flex; position:relative; justify-content:center; margin-top: 5%; margin-bottom:0%; font-weight: bolder; font-size: 15px;" id="valor" class="valor"></span></p>

3 Respostas 3

3

Você pode usar o método html para adicionar a imagem e o texto em formato HTML.

Algo assim:

$('#service').on('change', function() {
  var value = $(this)
    .children('option:selected')
    .val()

  if (value == 1) {
    $('#valor').html('<img src="https://picsum.photos/50/50/?image=10" /> Preço: R$ 70,00')
  } else if (value == 2) {
    $('#valor').html('<img src="https://picsum.photos/50/50/?image=20" /> Preço: R$ 100,00')
  } else if (value == 3) {
    $('#valor').html('<img src="https://picsum.photos/50/50/?image=30" /> Preço: R$ 120,00')
  } else if (value == 4) {
    $('#valor').html('<img src="https://picsum.photos/50/50/?image=40" /> Preço: R$ 160,00')
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select style="margin: 0 5% 0 13%;" class="border-box-contact" name="service" id="service" required>
  <option value="" disabled selected>Tamanho</option>
  <option value="1">PP (~1,2kg)</option>
  <option value="2">P (~1,8kg)</option>
  <option value="3">M (~2,5kg)</option>
  <option value="4">G (~3,5kg)</option>
</select>
<br />
<p>
  <span class="valor" id="valor" style="display:flex; position:relative; justify-content:center; margin-top: 5%; margin-bottom:0%; font-weight: bolder; font-size: 15px;"></span>
</p>


Você pode inclusive reduzir a quantidade de ifs, se quiser:

$('#service').on('change', function() {
  // Note que as chaves do objeto a seguir combinam com os valores dos elementos
  // <option> que você criou. Por isso, podemos usar o valor do <select> para
  // acessar a imagem e o preço desejados.
  var options = {
    1: '<img src="https://picsum.photos/50/50/?image=10" /> Preço: R$ 70,00',
    2: '<img src="https://picsum.photos/50/50/?image=20" /> Preço: R$ 100,00',
    3: '<img src="https://picsum.photos/50/50/?image=30" /> Preço: R$ 120,00',
    4: '<img src="https://picsum.photos/50/50/?image=40" /> Preço: R$ 160,00'
  }

  $('#valor').html(options[$(this).val()])
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select style="margin: 0 5% 0 13%;" class="border-box-contact" name="service" id="service" required>
  <option value="" disabled selected>Tamanho</option>
  <option value="1">PP (~1,2kg)</option>
  <option value="2">P (~1,8kg)</option>
  <option value="3">M (~2,5kg)</option>
  <option value="4">G (~3,5kg)</option>
</select>
<br />
<p>
  <span class="valor" id="valor" style="display:flex; position:relative; justify-content:center; margin-top: 5%; margin-bottom:0%; font-weight: bolder; font-size: 15px;"></span>
</p>


Edit 01:

Para fazer com que o texto fique abaixo da imagem, basta utilizar o seguinte CSS:

.valor img {
  display: block;
}

Isso fará com que a imagem e o texto fiquem em linhas diferentes. :)

3
  • Pode mudar o "style" dentro desse metodo? Commented 3/03/2019 às 16:34
  • E como eu faço para colocar o preco embaixo da imagem? uso "/n"? Commented 4/03/2019 às 1:57
  • 1
    Editei a resposta. :) Commented 4/03/2019 às 2:23
2

Você pode fazer como o Luiz Felipe colocou, esta perfeito. Eu só passaria os valores via atributo. Assim caso queira adicionar novos elementos ao select, não precisa alterar nada no javascript, ele já fica pronto para receber qualquer quantidade existente no select.

Ou seja, basta adicionar ou remover um option do select e o resultado final será o mesmo.

$('#service').on('change', function() {
  var value = $(this).children('option:selected')
  $('#valor').html('<img src="'+value.data('imagem')+'" /> Preço: R$ '+value.data('valor')+'')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select style="margin: 0 5% 0 13%;" class="border-box-contact" name="service" id="service" required>
  <option value="" disabled selected>Tamanho</option>
  <option value="1" data-imagem="https://picsum.photos/50/50/?image=10" data-valor="70,00">PP (~1,2kg)</option>
  <option value="2" data-imagem="https://picsum.photos/50/50/?image=20" data-valor="100,00">P (~1,8kg)</option>
  <option value="3" data-imagem="https://picsum.photos/50/50/?image=30" data-valor="120,00">M (~2,5kg)</option>
  <option value="4" data-imagem="https://picsum.photos/50/50/?image=40" data-valor="160,00">G (~3,5kg)</option>
</select>
<br />
<p>
  <span class="valor" id="valor" style="display:flex; position:relative; justify-content:center; margin-top: 5%; margin-bottom:0%; font-weight: bolder; font-size: 15px;"></span>
</p>

2
  • Mano, ótimo! E como eu faço para colocar o preco embaixo da imagem? uso "/n"? Commented 4/03/2019 às 1:57
  • 1
    Cara você pode colocar um <br/> depois da tag da imagem. Mas acho que esse exemplo é mais uma marcação, vale a pena dar uma trabalhada nessa parte para fazer algo elaborado, com css.
    – Zaffar
    Commented 4/03/2019 às 2:29
2

Você pode adicionar uma tag img no html com um determinado id:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="service" style="margin: 0 5% 0 13%;" name="service" required class="border-box-contact">
  <option value="" disabled selected>Tamanho</option>
  <option value=1>PP (~1,2kg)</option>
  <option value=2>P (~1,8kg)</option>
  <option value=3>M (~2,5kg)</option>
  <option value=4>G (~3,5kg)</option>
</select>
<br>
<img src="" id="imagem" /><br>
<p><span style="display:flex; position:relative; justify-content:center; margin-top: 5%; margin-bottom:0%; font-weight: bolder; font-size: 15px;" id="valor" class="valor"></span></p>

e alterar o conteúdo dela dinamicamente com jQuery usando $(...).attr("src", "caminho/para/imagem"):

$("#service").change(function() {
  var value = $(this).children("option:selected").val();
  if (value == 1) {
    $("#valor").text("Preço: R$ 70,00");
    $("#image").attr("src", "http://placehold.it/100x100");
  } else if (value == 2) {
    $("#valor").text("Preço: R$ 100,00");
    $("#image").attr("src", "http://placehold.it/100x100");
  } else if (value == 3) {
    $("#valor").text("Preço: R$ 120,00");
    $("#image").attr("src", "http://placehold.it/100x100");
  } else if (value == 4) {
    $("#valor").text("Preço: R$ 160,00");
    $("#image").attr("src", "http://placehold.it/100x100");
  }
});
2
  • E como eu faço para colocar o preco embaixo da imagem? uso "/n"? Commented 4/03/2019 às 1:57
  • 1
    Eu alterei o HTML pra deixar a imagem acima do preço. Pra deixar o preço em baixo precisa fazer uma quebra de linha com a tag <br> depois da imagem.
    – nhtoshiaki
    Commented 4/03/2019 às 2:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .