how to change the subtitle of the page with the selection of a select

Question

how to change the subtitle of the page with the selection of a select

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

Galera is very simple, I have a form that can serve multiple services. I need the subtitle of the page to change depending on 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>

javascript html5 select

asked by anonymous 03.02.2017 / 18:27

2 answers

How to manipulate part of the href attribute of a link using JavaScript in WordPress? Render html from the database using angular 1.6.1

score 1 · Answer 1

Follow a pure and simple javascript for this. I 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>

score 1 · Answer 2

See if this 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 in your h3 (subtitle):

<h3 id="subtitulo"><h3>

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

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

Whenever select is updated it will get value and play within element with id=subtitulo .