Tenho uma pagina web, desenvolvi utilizando asp.net mvc core e gostaria de ocultar um campo dependendo do que for selecionado no dropdown. Vocês tem algum código de exemplo, ou algum curso que fale sobre este assunto, desde já obrigado.
3
respostas
respostas
Ocultar um campo do formulário dependendo do que for selecionado no dropdown
Boa Tarde!
Segue exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Oculta Campos</title>
<script>
function ocultar(id){
let campos=document.getElementsByTagName("input");
for (let k=0;k<campos.length;k++){
campos[k].style.display="";
}
document.getElementById("Campo_"+id).style.display="none";
}
</script>
</head>
<body>
<select onchange="ocultar(this.value)">
<option value="1">Campo 1</option>
<option value="2">Campo 2</option>
<option value="3">Campo 3</option>
</select>
<input id="Campo_1" placeholder="Campo 1">
<input id="Campo_2" placeholder="Campo 2">
<input id="Campo_3" placeholder="Campo 3">
</body>
</html>Espero ter ajudado!!!
Boa tarde, ajudou sim, porém só funciona quando carrego pela primeira vez e só oculta um dos campos, mas agradeço a intenção.
Veja como ficaria com mais essas regras de negócio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Oculta Campos</title>
<script>
function ocultar(id) {
document.getElementById(id).style.display = "none";
localStorage.setItem("ocultos", localStorage.getItem("ocultos") + ";" + id);
}
function mostrarTodos() {
let campos = document.getElementsByTagName("input");
for (let k = 0; k < campos.length; k++) {
campos[k].style.display = "";
}
localStorage.setItem("ocultos", "");
}
function ocultarAqueles() {
let campos = localStorage.getItem("ocultos").split(";");
for (let k = 1; k < campos.length; k++) {
document.getElementById(campos[k]).style.display = "none";
}
}
</script>
</head>
<body onload="ocultarAqueles();">
<select onchange="ocultar(this.value)">
<option value="">Selecione o campo que quer ocultar</option>
<option value="Campo_1">Campo 1</option>
<option value="Campo_2">Campo 2</option>
<option value="Campo_3">Campo 3</option>
</select>
<button onclick="mostrarTodos()">Mostrar Todos</button>
<input id="Campo_1" placeholder="Campo 1">
<input id="Campo_2" placeholder="Campo 2">
<input id="Campo_3" placeholder="Campo 3">
</body>
</html>