个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 01:25:34 25 4
gpt4 key购买 nike

我试图针对 ID 为“OpcoesCampos”的选择隐藏/显示我的 div，但此代码不起作用。有人可以解释我的原因并给我一些帮助吗？顺便说一句，是否可以针对选择/输入上的选择值调用 Controller 方法？

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

最佳答案

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>

关于javascript - 在选择选项更改时隐藏/显示 div 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53831806/

25 4 0
文章推荐： parsing - ["03C0"] 如何匹配附件 P 中 的语法？
文章推荐： Python并发.futures.ThreadPoolExecutor max_workers
文章推荐： jquery - jvectormap 标记标签放置在鼠标 IE 上方
文章推荐： javascript - Javascript 是否等号引用对象或克隆它们？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com