select calling or a text field or another select

0

Guilherme Costamilam I thank you for the answers. I do not know where I'm wrong in the code. I'm just passing by 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>
    
asked by anonymous 01.05.2018 / 06:07

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 the child fields are initially invisible. Do not forget to add id in html

    
01.05.2018 / 09:00