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.
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.
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>