Hide / Show div bei der Auswahl der Option Änderung nicht funktioniert

stimmen
0

Ich versuche, meine divs gegen die select mit der ID „OpcoesCampos“ zu verstecken / zeigen aber dieser Code funktioniert nicht. Kann jemand meine, warum erklären und geben Sie mir etwas Hilfe? BTW, möglich ist, dass eine Controller-Methode gegen die ausgewählten Werte auswählt / Eingänge anrufen?

<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>
Veröffentlicht am 18/12/2018 um 11:14
quelle vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
0

Hier ist die Lösung.

$('#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();
        }
    }

Problem gefunden -> e.preventDefault () Sie haben nach dem Funktionsaufruf (MostraDropDownList) nennen.

und Sie haben statt dieser Anwendung verwenden ‚myFormType‘ Parameter zu übergeben.

Vielen Dank.

Beantwortet am 18/12/2018 um 11:34
quelle vom benutzer

stimmen
0

Ich habe einige der Probleme im Code festgelegt. Jetzt wird es nicht, dass Sie Fehler geben und Sie können Ihre HTML ändern, wie Sie wollen. Auch zeigen und verstecken funktioniert.

Es besteht keine Notwendigkeit, jedes Mal zusätzliche Parameter mit dem Funktionsaufruf zu übergeben. Der bessere Weg ist e.stopPropagation zu nennen (); nach Funktionsaufruf.

<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>
Beantwortet am 18/12/2018 um 11:44
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more