Skip to main content
6 de 6
adicionou 94 caracteres ao conteúdo
user avatar
user avatar

Com javascript puro

Utilizado o evento onChange para que seja realizada determinada ação após alguma mudança.

  • display, é uma propriedade do CSS que é responsável pela maneira como os elementos serão exibidos.
  • display: block por padrão, são aqueles que são renderizados no browser
  • display: none, esconde o elemento em questão

    function yesnoCheck(that) {
        if (that.value == "OUTRA") {
            document.getElementById("outrainst").style.display = "block";
        } else {
            document.getElementById("outrainst").style.display = "none";
        }
    }
    <div class="form-group">                
          <label> Instituição de ensino <br />
            <select class="form-group" name="instituição" id="instituição" onchange="yesnoCheck(this);">
              <option value="UFTM">UFTM</option>
              <option value="UNIUBE">UNIUBE</option>
              <option value="FACTHUS">FACTHUS</option>
              <option value="SENAI">FAZU</option>
              <option value="IMEPAC">IMEPAC</option>
              <option value="NENHUMA">NENHUMA</option>
              <option value="OUTRA">OUTRA</option>
            </select>
            <input type="text" class="form-control" name="outrainst" id="outrainst" style="display:none;">
          </label>
        </div>



Com Jquery

$(document).ready(function(){
 $("#instituição").change(function(){
    // Verificando se o valor atual é "OUTRA"
    if($(this).val() === "OUTRA"){
        // mostra o input
        $("#outrainst").show();
    }else{
        // esconde
        $("#outrainst").hide();
    }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">                
          <label> Instituição de ensino <br />
            <select class="form-group" name="instituição" id="instituição">
              <option value="UFTM">UFTM</option>
              <option value="UNIUBE">UNIUBE</option>
              <option value="FACTHUS">FACTHUS</option>
              <option value="SENAI">FAZU</option>
              <option value="IMEPAC">IMEPAC</option>
              <option value="NENHUMA">NENHUMA</option>
              <option value="OUTRA">OUTRA</option>
            </select>
            <input type="text" class="form-control" name="outrainst" id="outrainst" style="display:none;">
          </label>
        </div>

user60252