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>