Read a "value" inside a "<select></select>"

Question

How to read the values of 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 make a function that reads the values 0, 1, 2, 3, 4 and returns a value to an "Id" readonly?

---

Thank you all! I managed to solve it as follows (Thank You all! I Managed to Solve as Follows):

Problem: Read a "Value" in a "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 be like this:

Problem: Read a "Value" in a "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>

Answer 1

You can do it like this:

document.getElementById("cAtividades").addEventListener("change", function() {
  document.getElementById("campo").value = this.value;
});

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

<input type="text" id="campo" readonly>

Answer 2

In your job you can do something like:

var atividade = document.getElementById ('cAtividades').value;

Then you pass the activity value to where you want.