how to change the page subtitle by choosing a select

Question

Guys, it’s really simple, I have a form that can be used for various services. I need the page subtitle to change according to the choice (in a select) of the service.

I’m using the following a bit of code

<header class="jumbotron">
    <h1>
        <img src="img/logo.png">
    </h1>
    <h2>Pedido de Serviço de importação</h2>
    <h3><h3> //AQUI FICARIA O SUBTITULO DA PAGINA
</header>

<fieldset class="campos">
<legend>Dados do serviço</legend>
<div class="form-group">
<label for="servico">Tipo de serviço</label>
<select name="servico" class="form-control" id="servico">
<option value=""></option>
<option value="DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO">DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO</option>
<option value="DESOVA DIRETA">DESOVA DIRETA</option>
<option value="DESPALETIZAÇÃO">DESPALETIZAÇÃO</option>
<option value="ETIQUETAGEM">ETIQUETAGEM</option>
<option value="FOTOS">FOTOS</option>
<option value="MONITORAMENTO DE TOMADA ELETRICA">MONITORAMENTO DE TOMADA ELETRICA</option>
<option value="OVAÇÃO ">OVAÇÃO </option>
<option value="PALETIZAÇÃO">PALETIZAÇÃO</option>
<option value="PESAGEM DE VOLUMES">PESAGEM DE VOLUMES</option>
<option value="POSICIONAMENTO DE CARGA">POSICIONAMENTO DE CARGA</option>
</select>

Answer 1

See if that helps you:

servico.onchange = function() {
  subtitulo.innerHTML = this.value;
}

<header class="jumbotron">
    <h1>
        <img src="img/logo.png">
    </h1>
    <h2>Pedido de Serviço de importação</h2>
    <h3 id="subtitulo"><h3>
</header>

<fieldset class="campos">
<legend>Dados do serviço</legend>
<div class="form-group">
<label for="servico">Tipo de serviço</label>
<select name="servico" class="form-control" id="servico">
<option value=""></option>
<option value="DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO">DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO</option>
<option value="DESOVA DIRETA">DESOVA DIRETA</option>
<option value="DESPALETIZAÇÃO">DESPALETIZAÇÃO</option>
<option value="ETIQUETAGEM">ETIQUETAGEM</option>
<option value="FOTOS">FOTOS</option>
<option value="MONITORAMENTO DE TOMADA ELETRICA">MONITORAMENTO DE TOMADA ELETRICA</option>
<option value="OVAÇÃO ">OVAÇÃO </option>
<option value="PALETIZAÇÃO">PALETIZAÇÃO</option>
<option value="PESAGEM DE VOLUMES">PESAGEM DE VOLUMES</option>
<option value="POSICIONAMENTO DE CARGA">POSICIONAMENTO DE CARGA</option>
</select>

First I put an id on your h3 (subtitling):

<h3 id="subtitulo"><h3>

Then I assign a function to the event onchange of your select:

servico.onchange = function() {
    subtitulo.innerHTML = this.value;
}

Every time the select for updated it will pick up the value and play inside the element with id=subtitulo.

Answer 2

Follow a pure and simple javascript for this. hope it helps

   <header class="jumbotron">
        <h1>
            <img src="img/logo.png">
        </h1>
        <h2>Pedido de Serviço de importação</h2>
        <h3 id="subtitulo"><h3> //AQUI FICARIA O SUBTITULO DA PAGINA
    </header>

    <fieldset class="campos">
    <legend>Dados do serviço</legend>
    <div class="form-group">
    <label for="servico">Tipo de serviço</label>
    <select name="servico" class="form-control" id="servico" onchange="drop()">
    <option value=""></option>
    <option value="DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO">DESOVA DIRETA C/ DEVOLUÇÃO DE VAZIO</option>
    <option value="DESOVA DIRETA">DESOVA DIRETA</option>
    <option value="DESPALETIZAÇÃO">DESPALETIZAÇÃO</option>
    </select>

    <script>
    function drop(){
        document.getElementById("subtitulo").innerText = document.getElementById("servico").value;
        }
    </script>