<select> calling either a text field or another select

Asked

Viewed 376 times

0

Guilherme Costamilam mto thanks for the answers. I don’t know where I’m going wrong in the code. I’m going to see if you can help me.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset=utf-8"/>
<title>Consultas de Portabilidades</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="_css/style.css"/>
	<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<!--MENU-->
<nav>
    <ul>
        <a href="index.php">
            <li>
                <div class="barra"></div>
                <p class="menu"><strong>Cadastro</strong></p>
            </li>
        </a>

        <a href="consultas.php">
            <li>
                <div class="barra"></div>
                <p class="menu"><strong>Consultas</strong></p>
            </li>
        </a>


    </ul>
</nav>
<!--Fim Menu-->
<div style="position: fixed; left: 325px; overflow:auto; height:100%">
 <div class="container-fluid col-lg-7">
<h1><br>Consultas</h1>
<hr>

<script>
//elementos html (select e input)
let tipo = document.getElementById('tipo');
let situacao = document.getElementById('situacao');
let filtro = document.getElementById('filtro');

//quando houver uma mudança no select tipo é chamada essa função
tipo.addEventListener('change', function() {
  //verifica o valor do select e mostra/esconde o campo correto
  if(tipo.value == 'solicitante') {
    situacao.style.display = 'block';
    filtro.style.display = 'none';
  } else {
    situacao.style.display = 'none';
    filtro.style.display = 'block';
  }
});
</script>

<select id='tipo' required autofocus class="form-control" name="tipo">
  <option value="">SELECIONAR</option>
  <option value="contrato">CONTRATO</option>
  <option value="cliente">CLIENTE</option>
  <option value="cpf">CPF</option>
  <option value="numero">NÚMERO</option>
  <option value="solicitante">SOLICITANTE</option>
  <option value="situacao">SITUAÇÃO</option>
</select>
<!--Se for escolhido SITUAÇÃO então chama um outro campo SELECT ... -->

<!--Campo Situaçao-->
<div class="input-group col-lg-10">
  </div>
  <select style='display: none;' id='situacao' type='text' class="form-control" name="situacao">
    <option value="SOLICITADA">SOLICITADA</option>
    <option value="PORTADA">PORTADA</option>
    <option value="CANCELADA">CANCELADA</option>
    <option value="ERRO">ERRO</option>
  </select>
</div>
<!--Fim Campo Situaçao-->

<!--Senão chama o campo INPUT -->
<input id='filtro' style='display: none;' type="text" class="form-control" name="filtro" required autofocus>

</div>
</body>
</html>

select input

1 answer

0

//elementos html (select e input)
let tipo = document.getElementById('tipo');
let situacao = document.getElementById('situacao');
let filtro = document.getElementById('filtro');

//quando houver uma mudança no select tipo é chamada essa função
tipo.addEventListener('change', function() {
  //verifica o valor do select e mostra/esconde o campo correto
  if(tipo.value == 'solicitante') {
    situacao.style.display = 'block';
    filtro.style.display = 'none';
  } else {
    situacao.style.display = 'none';
    filtro.style.display = 'block';
  }
});
<select id='tipo' required autofocus class="form-control" name="tipo">
  <option value="">SELECIONAR</option>
  <option value="contrato">CONTRATO</option>
  <option value="cliente">CLIENTE</option>
  <option value="cpf">CPF</option>
  <option value="numero">NÚMERO</option>
  <option value="solicitante">SOLICITANTE</option>
  <option value="situacao">SITUAÇÃO</option>
</select>
<!--Se for escolhido SITUAÇÃO então chama um outro campo SELECT ... -->

<!--Campo Situaçao-->
<div class="input-group col-lg-10">
  <div class="input-group-addon">
    <span>!</span>
  </div>
  <select style='display: none;' id='situacao' type='text' class="form-control" name="situacao">
    <option value="SOLICITADA">SOLICITADA</option>
    <option value="PORTADA">PORTADA</option>
    <option value="CANCELADA">CANCELADA</option>
    <option value="ERRO">ERRO</option>
  </select>
</div>
<!--Fim Campo Situaçao-->

<!--Senão chama o campo INPUT -->
<input id='filtro' style='display: none;' type="text" class="form-control" name="filtro" required autofocus>

Note that at first the secondary fields are invisible. Don’t forget to add the id in html

  • Friend mto thanks for the answer. I very new in php and html. In the code would be between the <script></script tags> ?

  • Yeah, that’s right

  • Unfortunately putting it like that didn’t work. :(

  • You must have forgotten something, in my reply, click on run and test, that’s not what you wanted?

  • Make sure you left the second select and input invisible, and put the id on them

  • That’s exactly what I wanted. I’m going to run a check on my code. Thank you very much

  • Put the script at the end of the body: <script> ... </script> </body>, this should make it work and also helps to make the site faster

Show 2 more comments

Browser other questions tagged select input

You are not signed in. Login or sign up in order to post.