[英]Hide/Show div on select option change not working
我正在尝试针对ID为“ OpcoesCampos”的选择隐藏/显示div,但是此代码无法正常工作。 有人可以解释我的原因并给我一些帮助吗? 顺便说一句,有可能针对选择/输入上的选择值调用控制器方法吗?
<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>
我已经修复了您代码中的一些问题。 现在它不会给您错误,您可以根据需要修改html。 显示和隐藏也将起作用。
不需要每次都通过函数调用传递额外的参数。 更好的方法是调用e.stopPropagation();。 函数调用后。
<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>
这是解决方案。
$('#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();
}
}
找到问题-> e.preventDefault(),您必须在函数调用(MostraDropDownList)之后调用。
并且您必须使用'myFormType'代替它来传递参数。
谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.