Masquer / Afficher div sur certains changements d'option ne fonctionne pas

voix
0

J'essaie de cacher / montrer mes div est contre la sélection avec id « OpcoesCampos », mais ce code ne fonctionne pas. Quelqu'un peut-il expliquer pourquoi ma et me donner un peu d'aide? BTW, est-il possible d'appeler une méthode de commande par rapport aux valeurs de sélection sélectionne le / les entrées?

<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>
Créé 18/12/2018 à 11:14
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
0

J'ai fixé quelques-uns des problèmes dans votre code. Maintenant, il ne vous donnera pas des erreurs et vous pouvez modifier votre code HTML que vous voulez. montrer aussi et se cacher fonctionnera.

Il n'y a pas besoin de passer paramètre supplémentaire à l'appel chaque fois que la fonction. La meilleure façon est d'appeler e.stopPropagation (); après appel de fonction.

<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>
Créé 18/12/2018 à 11:44
source utilisateur

voix
0

Voici la 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();
        }
    }

Problème trouvé -> e.preventDefault (), vous devez appeler après l'appel de fonction (MostraDropDownList).

et vous devez utiliser au lieu de cette utilisation myFormType 'pour passer des paramètres.

Merci.

Créé 18/12/2018 à 11:34
source utilisateur

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