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 browserdisplay: 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>