Make image appear/disappear by clicking

Question

I would like the user to click on the button of the "Size" to appear an image of a cake together with the price I already got.

My code is like this:

$("#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>

Answer 1

You can use the method html to add the image and text in HTML format.

Something like that:

$('#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>

---

You can even reduce the amount of ifs, if you want:

$('#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:

To make the text stay down below image, just use the following CSS:

.valor img {
  display: block;
}

This will make the image and text lines different. :)

Answer 2

You can add a tag img html with a certain 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>

and change its contents dynamically with jQuery using $(...).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");
  }
});

Answer 3

You can do as the Luiz Felipe placed, this perfect. I would only pass the values via attribute. So if you want to add new elements to the select, no need to change anything in javascript, it is already ready to receive any amount existing on select.

That is, just add or remove a option and the final result will be the same.

$('#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>