Change the label value from a list

Question

Hi, I’m a beginner in javascript, I need a help: I need you to change the value of a label according to an item selected in a list:

for example:

selected item 1 ---- label value must be 1.00 selected value 2 ------ label value must be 2,00

below the code and since thank you

List

<div class="lista_serv">
    <form action="">
        <span>
            <label>Selecione o produto | serviço:</label> 
                <select class="form-control" id="lista_servicos">
                        <option name="selecione" value="0">Selecione</option> 
                        <option name="gracco" value="49.55">XGracco</option>
                        <option name="automacao" value="0.051">Automação</option>
                        <option name="ia" value="0.761">IA</option>
                        <option name="triare" value="2.418">Finch Flow</option>
                        <option name="esteiras_usuarios" value="41.210">Esteiras por usuário</option>
                        <option name="esteiras_processos" value="1.628">Esteiras por processo</option>
                        <option name="publicacoes" value="0.426">BPO Publicações</option>
                        <option name="cadastro" value="2.02">BPO Cadastro</option>
                        <option name="oficios" value="5.98">BPO Ofícios</option>
                </select>
        </span>
</form>
</div>


label a ser alterada

<div class="c_unit">
    <label>Custo Unitário: <b class="custo_un">R$</b><label class="vlr_tab_serv" name="serv_selecionado"><b class="custo_un" id="" value="">**0,00**</b></label></label>
</div>

Answer 1

Hello! Take a look at the following changes:

function updateField(){

let selecionado = document.getElementById('lista_servicos').value;

document.getElementById('valor').innerHTML = selecionado;
}

<div class="lista_serv">
    <form action="">
        <span>
            <label>Selecione o produto | serviço:</label> 
                <select class="form-control" id="lista_servicos" onchange="updateField()">
                        <option name="selecione" value="0">Selecione</option> 
                        <option name="gracco" value="49.55">XGracco</option>
                        <option name="automacao" value="0.051">Automação</option>
                        <option name="ia" value="0.761">IA</option>
                        <option name="triare" value="2.418">Finch Flow</option>
                        <option name="esteiras_usuarios" value="41.210">Esteiras por usuário</option>
                        <option name="esteiras_processos" value="1.628">Esteiras por processo</option>
                        <option name="publicacoes" value="0.426">BPO Publicações</option>
                        <option name="cadastro" value="2.02">BPO Cadastro</option>
                        <option name="oficios" value="5.98">BPO Ofícios</option>
                </select>
        </span>
</form>
</div>


label a ser alterada

<div class="c_unit">
    <label>Custo Unitário: <b class="custo_un">R$</b><label class="vlr_tab_serv" name="serv_selecionado"><b class="custo_un" id="valor" value="">**0,00**</b></label></label>
</div>

Answer 2

It is possible to capture the value of option selected through the event change of select.

First I select the element and store within a variable

let list = document.querySelector("#lista_servicos")

Then just add one listener for the event change

list.addEventListener("change", e=>{            
    document.querySelector("#price").innerHTML = e.target.value
})

note that the event data is passed as parameter to the function, so that if you make a console.log(e) will see the event data in the console, between this information we can capture the value of option selected and assign this value to the label.

I made a small change to your html, adding the id price, overall your label will look like this:

<label>Custo Unitário: <b class="custo_un">R$</b><label class="vlr_tab_serv" name="serv_selecionado"><b class="custo_un" id="price" value="">**0,00**</b></label></label>

complete code

let list = document.querySelector("#lista_servicos")
    
        list.addEventListener("change", e=>{            
            document.querySelector("#price").innerHTML = e.target.value

        })

<div class="lista_serv">
        <form action="">
            <span>
                <label>Selecione o produto | serviço:</label> 
                    <select class="form-control" id="lista_servicos">
                            <option name="selecione" value="0">Selecione</option> 
                            <option name="gracco" value="49.55">XGracco</option>
                            <option name="automacao" value="0.051">Automação</option>
                            <option name="ia" value="0.761">IA</option>
                            <option name="triare" value="2.418">Finch Flow</option>
                            <option name="esteiras_usuarios" value="41.210">Esteiras por usuário</option>
                            <option name="esteiras_processos" value="1.628">Esteiras por processo</option>
                            <option name="publicacoes" value="0.426">BPO Publicações</option>
                            <option name="cadastro" value="2.02">BPO Cadastro</option>
                            <option name="oficios" value="5.98">BPO Ofícios</option>
                    </select>
            </span>
    </form>
    </div>
    
    
    label a ser alterada
    
    <div class="c_unit">
        <label>Custo Unitário: <b class="custo_un">R$</b><label class="vlr_tab_serv" name="serv_selecionado"><b class="custo_un" id="price" value="">**0,00**</b></label></label>
    </div>