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?