jQuery: . val() in select only returns the value of the first option

Question

I have a select element in my html page (code below):

<section class="calc-tit-desc" id="">
<h3 id="calc-tit">Calculando Para Diarista Por Hora</h3>
    <p id="calc-desc">Calcule o valor do serviço de acordo com a quantidade de horas que a profissional trabalhará e a frequência que deseja o serviço.</p>    
</section>
<section class="calc-parametros">
    <form>
        <div class="select-wrapper">
            <select id="horas">
                <option value="0">- HORAS H -</option>
                <option value="4">4 horas</option>
                <option value="6">6 horas</option>
                <option value="8">8 horas</option>
            </select>
        </div>
        <br />
        <div class="select-wrapper">
            <select id="frequencia">
                <option value="0">- FREQUÊNCIA -</option>
                <option value="avulso">Avulso</option>
                <option value="1">1x por semana</option>
                <option value="2">2x por semana</option>
                <option value="3">3x por semana</option>
                <option value="mais3">Mais de 3x por semana</option>
            </select>
        </div>
        <ul class="actions margintop">
            <li>
                <span class="button" id="calc-ph-bt">Calcular</span>
            </li>
        </ul>
    </form>
</section>

And I’m trying to use to take the value attribute of the option selected by the user, as follows:

var tempoPh = $('#horas').val();
var freqPh = $("#frequencia").val();

$("#calc-ph-bt").click(function() {
    alert(tempoPh);
    alert(freqPh);
});

But the value returned is always the value of the first option, "0", even if another option is selected. Does anyone know how to fix this?

Answer 1

When you run these two lines of code:

var tempoPh = $('#horas').val();
var freqPh = $("#frequencia").val();

variables will receive the select value at the moment. Later when Corrers the other lines

$("#calc-ph-bt").click(function(){
    alert(tempoPh);
    alert(freqPh);
});

what those alert you will be returned the value you had saved before. This is different from keeping a reference to the element in the variable and within that .click() "ask" again the value with .val().

I assume what you want is:

var tempoPh = $('#horas');
var freqPh = $("#frequencia");

$("#calc-ph-bt").click(function(){
    alert(tempoPh.val());
    alert(freqPh.val());
});

An example with your HTML would be like this:

var componentes = $('#horas, #frequencia').get();
$("#calc-ph-bt").click(function() {
  const total = Number(componentes[0].value || 0) * Number(componentes[1].value || 0);
  alert(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calc-ph" class="items style1 medium onscroll-fade-in calculadora">
  <section class="calc-tit-desc" id="">
    <h3 id="calc-tit">Calculando Para Diarista Por Hora</h3>
    <p id="calc-desc">Calcule o valor do serviço de acordo com a quantidade de horas que a profissional trabalhará e a frequência que deseja o serviço.</p>
  </section>
  <section class="calc-parametros">
    <form>
      <div class="select-wrapper">
        <select id="horas">
          <option value="0">- HORAS H -</option>
          <option value="4">4 horas</option>
          <option value="6">6 horas</option>
          <option value="8">8 horas</option>
        </select>
      </div>
      <br />
      <div class="select-wrapper">
        <select id="frequencia">
          <option value="0">- FREQUÊNCIA -</option>
          <option value="avulso">Avulso</option>
          <option value="1">1x por semana</option>
          <option value="2">2x por semana</option>
          <option value="3">3x por semana</option>
          <option value="mais3">Mais de 3x por semana</option>
        </select>
      </div>
      <ul class="actions margintop">
        <li>
          <span class="button" id="calc-ph-bt">Calcular</span>
        </li>
      </ul>
    </form>
  </section>
</div>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$('select').on('change', function(){
  alert('Valor: ' + $('select option:selected').val())
})
})


</script>

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>

</select>