0

Tenho um elemento select na minha página html (código abaixo):

<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>

E estou tentando usar pegar o valor do atributo value do option selecionado pelo usuário, da seguinte maneira:

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

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

Mas o valor retornado é sempre o value do primeiro option, "0", mesmo que outro option esteja selecionado. Alguém sabe como posso corrigir isso?

2 Respostas 2

3

Quando corres estas duas linhas de código:

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

as variáveis vão receber o valor do select no momento. Mais tarde quando corrers as outras linhas

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

o que esses alert te vão devolver é o valor que tinham guardado antes. Isso é diferente de guardar uma referência ao elemento na variável e, dentro desse .click() "pedir" de novo o valor com .val().

Presumo que o que queres é:

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

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

Um exemplo com o teu HTML seria assim:

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>

0

<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>

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 .