Hide/Show div on select option change not working
Question
I'm trying to hide/show my div's against the select with id "OpcoesCampos" but this code is not working. Can someone explain my why and give me some help? BTW, is that possible to call a controller method against the select values on selects/inputs?
<body class="img-main" style="background-image: url(https://images.pexels.com/photos/34578/pexels-photo.jpg?cs=srgb&dl=blogging-business-coding-34578.jpg&fm=jpg); background-size: cover;">
<h2 style="color:white;"> Lista de Estágios/Projetos </h2>
<div class="panel panel-primary">
<div class="panel-heading">
<select class="form-control" id="OpcoesCampos">
<option>Selecione o filtro</option>
<option>Propostas Ativas</option>
<option>Localização</option>
<option>Ano/Semestre</option>
</select>
<input id="Localização" type="text">
<div class="form-group" id="Ano">
<div class="col-md-10">
// Some options inside here
</div>
</div>
<div class="form-group" id="Semestre">
<div class="col-md-10">
// Some options inside here
</div>
</div>
</div>
<div class="panel-body">
// Just a table with content inside here
<p>
@Html.ActionLink("Adicionar Projeto/Estágio", "Create")
</p>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$('#Localização').hide();
$('#Ano').hide();
$('#Semestre').hide();
$(function () {
$('#OpcoesCampos').change(function () {
e.preventDefault()
MostraDropDownList($(this).val());
});
});
function MostraDropDownList(this) {
if (myFormType == 'Propostas Ativas') {
$('#Localização').hide();
$('#Ano').hide();
$('#Semestre').hide();
e.stopPropagation();
}
else if (myFormType == 'Localização') {
$('#Localização').show();
$('#Ano').hide();
$('#Semestre').hide();
e.stopPropagation();
}
else if (myFormType == "Ano/Semestre") {
$('#Localização').hide();
$('#Ano').show();
$('#Semestre').show();
e.stopPropagation();
}
}
</script>
}
</body>
2 answers
solution1
1 2018-12-18 11:44:29
I have fixed some of the issues in your code. Now it will not give you errors and you can modify your html as you want. Also show and hide will work.
There is no need to pass extra parameter with the function call every time. The better way is to call e.stopPropagation(); after function call.
<html>
<head></head>
<body class="img-main" style="background-image: url(https://images.pexels.com/photos/34578/pexels-photo.jpg?cs=srgb&dl=blogging-business-coding-34578.jpg&fm=jpg); background-size: cover;">
<h2 style="color:white;"> Lista de Estágios/Projetos </h2>
<div class="panel panel-primary">
<div class="panel-heading">
<select class="form-control" id="OpcoesCampos">
<option>Selecione o filtro</option>
<option>Propostas Ativas</option>
<option>Localização</option>
<option>Ano/Semestre</option>
</select>
<input id="Localização" type="text">
<div class="form-group" id="Ano">
<div class="col-md-10">
<!-- Some options inside here -->
</div>
</div>
<div class="form-group" id="Semestre">
<div class="col-md-10">
<!-- // Some options inside here -->
</div>
</div>
</div>
<div class="panel-body">
<!-- // Just a table with content inside here -->
<p>
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$('#Localização').hide();
$('#Ano').hide();
$('#Semestre').hide();
function MostraDropDownList(myFormType) {
if (myFormType == 'Propostas Ativas') {
$('#Localização').hide();
$('#Ano').hide();
$('#Semestre').hide();
}
else if (myFormType == 'Localização') {
$('#Localização').show();
$('#Ano').hide();
$('#Semestre').hide();
}
else if (myFormType == "Ano/Semestre") {
$('#Localização').hide();
$('#Ano').show();
$('#Semestre').show();
}
}
$(function () {
$('#OpcoesCampos').change(function(e) {
e.preventDefault();
MostraDropDownList($(this).val());
e.stopPropagation();
});
});
</script>
</body>
</html>
solution2
0 ACCPTED 2018-12-18 11:34:36
Here is the Solution.
$('#Localização').hide();
$('#Ano').hide();
$('#Semestre').hide();
$(function () {
$('#OpcoesCampos').change(function (e) {
MostraDropDownList($(this).val(),e);
e.preventDefault();
});
});
function MostraDropDownList(myFormType,e) {
if (myFormType == 'Propostas Ativas') {
$('#Localização').hide();
$('#Ano').hide();
$('#Semestre').hide();
e.stopPropagation();
}
else if (myFormType == 'Localização') {
$('#Localização').show();
$('#Ano').hide();
$('#Semestre').hide();
e.stopPropagation();
}
else if (myFormType == "Ano/Semestre") {
$('#Localização').hide();
$('#Ano').show();
$('#Semestre').show();
e.stopPropagation();
}
}
Issue found -> e.preventDefault() you have to call after function call(MostraDropDownList).
and You have to use instead of this use 'myFormType' to pass parameters.
Thanks.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Show/hide div based on select option not working
hide/show div from select option on ios - not working
JQuery/Javascript conflict? - Show/Hide div based on select option not working
jQuery show/hide div on select change not working with JSON populated options
jQuery Show / Hide Div According to Option Select
Show/Hide div based on select option
Hide/show div section - select option
show/hide div based on select option with getelementsbyclassname
jQuery show/hide div based on select option
on option select show div and hide others
Related Tags