How to read options values from a <select></select>
using HTML5 + JavaScript?
Ex:
<select name="tAtividades" id="cAtividades">
<option value="0" selected="selected">Selecione o Tipo</option>
<option value="1">Serviços de Saúde</option>
<option value="2">Alimentos</option>
<option value="3">Engenharia</option>
<option value="4">Produtos</option>
</select></p>
How to do a function that reads values 0, 1, 2, 3, 4 and returns a value for an readonly ?
Thank you all! I was able to solve it as follows (Thank You all! I managed to solve as follows):
Problem: Read the "Value" in the "select"
<!--Campo de Seleção e Valores atribuídos em cada opção-->
<!--Declarando a função que será executada no JavaScript onchange="calcAtividades();" -->
<p><label for="cAtividades">Atividades: </label>
<select name="tAtividades" id="cAtividades" onchange="calcAtividades();">
<option value="0" selected="selected">Selecione o Tipo</option>
<option value="1">Serviços de Saúde</option>
<option value="2">Alimentos</option>
<option value="3">Engenharia</option>
<option value="4">Produtos</option>
</select></p>
<!--Definições onde será mostrado na tela o valor da taxa após a leitura de cada "Atividade" que será selecionada-->
<!--O Id "cTotal" receberá o valor e mostrará na tela no campo de texto que está definida como somente leitura(readonly)-->
<fieldset><legend>Valor da taxa</legend>
<p><label for="cTotal">Total R$: </label><input type="text" name="tTotal" id="cTotal" placeholder="Total a pagar..." readonly/></p>
</fieldset>
<!--Função JavaScript que fará:
-Leitura do "value" dentro do "select";
-Calculo de qual value é respectivamente relacionada com sua atividade;
-Passar o valor para o Id "cTotal"-->
<script>
/*####################Função - Calcular Taxa (Atividades)####################*/
function calcAtividades() {
//Ler o Select
var lerSelect = document.getElementById('cAtividades');
//Ler o value do select
var taxa = lerSelect.value;
//Condição de qual value representa tal atividade
//Se "value" for igual a isso "taxa" vai receber aquilo...
if (lerSelect.value == 0) {
taxa = 0;
}
if (lerSelect.value == 1) {
taxa = 100.00;
}
else if (lerSelect.value == 2) {
taxa = 200.00;
}
else if (lerSelect.value == 3) {
taxa = 300.00;
}
else if (lerSelect.value == 4) {
taxa = 400.00;
}
//Retornar o valor da taxa para o Id "cTotal"
document.getElementById('cTotal').value = taxa;
}
/*****************************************************************************/
</script>
Another way would look like this:
Problem: Read the "Value" in the "select"
<!--Campo de Seleção e Valores atribuídos em cada opção-->
<!--Declarando a função que será executada no JavaScript onchange="calcAtividades();" -->
<p><label for="cAtividades">Atividades: </label>
<select name="tAtividades" id="cAtividades" onchange="calcAtividades();">
<option value="0" selected="selected">Selecione o Tipo</option>
<option value="1">Serviços de Saúde</option>
<option value="2">Alimentos</option>
<option value="3">Engenharia</option>
<option value="4">Produtos</option>
<!--Este value no caso, será impresso '' (ver função).-->
<option value="5">Não terá valor</option>
</select></p>
<!--Definições onde será mostrado na tela o valor da taxa após a leitura de cada "Atividade" que será selecionada-->
<!--O Id "cTotal" receberá o valor e mostrará na tela no campo de texto que está definida como somente leitura(readonly)-->
<fieldset><legend>Valor da taxa</legend>
<p><label for="cTotal">Total R$: </label><input type="text" name="tTotal" id="cTotal" placeholder="Total a pagar..." readonly/></p>
</fieldset>
<!--Função JavaScript que fará:
-Leitura do "value" dentro do "select";
-Calculo de qual value é respectivamente relacionada com sua atividade;
-Passar o valor para o Id "cTotal"-->
<script>
/*####################Função - Calcular Taxa (Atividades)####################*/
function calcAtividades() {
//Ler o Select
var selectValue = document.getElementById('cAtividades').value;
// Valores para cada opçao do select
var values = {
0: 200,
1: 300,
2: 500,
3: 700,
4: 1920
}
//Retornar o valor da taxa para o Id "cTotal"
document.getElementById('cTotal').value = values[selectValue] || '';
/**
* values[selectValue] || '' -> Isso faz com que o valor do select seja pego na lista de valores,
* caso tenha algum valor no objeto values com o valor do select, usamos ele, caso não tenha, usamos
* uma string vazia para deixar o campo em "branco"
*/
}
/*****************************************************************************/
</script>