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

Question

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

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I have a select element on 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 get the value attribute value 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 I can fix this?

jquery html-select

asked by anonymous 20.09.2017 / 18:28

2 answers

How to hide the iframe scroll bar? System.IndexOutOfRangeException SQLDataReader

score 3 · Answer 1

When you run these two lines of code:

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

the variables will receive the value of the select at the moment. Later when you run the other lines

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

What these alert will give you back is the amount they had saved before. This is different from saving a reference to the element in the variable, and within that .click() "request" again the value with .val() .

I assume that 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 look 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><divid="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>

score 0 · 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:'+$('selectoption:selected').val())})})</script><select><optionvalue="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>

</select>