Fatal编程技术网
  • javascript/
  • Javascript 选择选项时隐藏/显示div更改不起作用

Javascript 选择选项时隐藏/显示div更改不起作用

javascript jquery asp.net-mvc

Javascript 选择选项时隐藏/显示div更改不起作用,javascript,jquery,asp.net-mvc,hide,show-hide,Javascript,Jquery,Asp.net Mvc,Hide,Show Hide,我试图根据id为“OpcoesCampos”的select隐藏/显示我的div，但此代码不起作用。有人能解释一下我的原因并给我一些帮助吗？ 顺便问一下，是否可以根据选择/输入上的选择值调用控制器方法 <body class="img-main" style="background-image: url(https://images.pexels.com/photos/34578/pexels-photo.jpg?cs=srgb&dl=blogging-business-coding

我试图根据id为“OpcoesCampos”的select隐藏/显示我的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>


伊斯塔吉奥斯/项目清单
Selecione o filtro
命题
奥里萨昂
阿诺/塞梅斯特
//这里有一些选择
//这里有一些选择
//这里只有一张有内容的桌子

@ActionLink（“Adicionar Projeto/Estágio”，“创建”）


@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
$（'#Localizaão'）.hide（）；
$（'#Ano'）.hide（）；
$（'Semestre'）.hide（）；
$（函数（）{
$（'#OpcoesCampos'）。更改（函数（）{
e、 预防默认值（）
MostraDropDownList（$（this.val（））；
});
});
功能MostraDropDownList（此）{
如果（myFormType=='Propositativas'）{
$（'#Localizaão'）.hide（）；
$（'#Ano'）.hide（）；
$（'Semestre'）.hide（）；
e、 停止传播（）；
}
else if（myFormType=='Localizaão'）{
$（'#Localizaão'）.show（）；
$（'#Ano'）.hide（）；
$（'Semestre'）.hide（）；
e、 停止传播（）；
}
else if（myFormType==“Ano/Semestre”）{
$（'#Localizaão'）.hide（）；
$（'#Ano'）.show（）；
$（'Semestre'）.show（）；
e、 停止传播（）；
}
}
}
以下是解决方案

$('#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”来传递参数

谢谢。

这是解决方案

$('#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”来传递参数

谢谢

我已经修复了代码中的一些问题。现在它不会给你 错误，您可以根据需要修改html。也显示和隐藏 会有用的

不需要在每次函数调用时传递额外的参数 时间更好的方法是调用e.stopPropagation（）；后功能 打电话


伊斯塔吉奥斯/项目清单
Selecione o filtro
命题
奥里萨昂
阿诺/塞梅斯特



$（'#Localizaão'）.hide（）；
$（'#Ano'）.hide（）；
$（'Semestre'）.hide（）；
函数MostraDropDownList（myFormType）{
如果（myFormType=='Propositativas'）{
$（'#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（）；
}
}
$（函数（）{
$（'#OpcoesCampos'）。更改（函数（e）{
e、 预防默认值（）；
MostraDropDownList（$（this.val（））；
e、 停止传播（）；
});
});
我已经修复了代码中的一些问题。现在它不会给你 错误，您可以根据需要修改html。也显示和隐藏 会有用的

不需要在每次函数调用时传递额外的参数 时间更好的方法是调用e.stopPropagation（）；后功能 打电话


伊斯塔吉奥斯/项目清单
Selecione o filtro
命题
奥里萨昂
阿诺/塞梅斯特



$（'#Localizaão'）.hide（）；
$（'#Ano'）.hide（）；
$（'Semestre'）.hide（）；
函数MostraDropDownList（myFormType）{
如果（myFormType=='Propositativas'）{
$（'#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（）；
}
}
$（函数（）{
$（'#OpcoesCampos'）。更改（函数（e）{
e、 预防默认值（）；
MostraDropDownList（$（this.val（））；
e、 停止传播（）；
});
});