Pokaż / Ukryj div na Wybierz Zmień opcja nie działa

głosy
0

Staram się ukryć / pokazać moje div wbrew wybierz z id „OpcoesCampos”, ale ten kod nie działa. Czy ktoś może wyjaśnić mi dlaczego i dać mi jakąś pomoc? BTW, czy to możliwe, aby wywołać metodę kontrolera przeciwko wybranych wartości na wejściach / wybiera?

<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>
Utwórz 18/12/2018 o 11:14
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
0

Mam stałe niektóre z problemów w kodzie. Teraz to nie daje błędów i można zmodyfikować html, jak chcesz. Również pokazać i ukryć zadziała.

Nie ma potrzeby, aby przejść dodatkowy parametr przy wywołaniu funkcji za każdym razem. Lepszym sposobem jest wywołanie e.stopPropagation (); Po wywołaniu funkcji.

<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>
Odpowiedział 18/12/2018 o 11:44
źródło użytkownik

głosy
0

Oto rozwiązanie.

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

Emisja znaleziono -> e.preventDefault () trzeba zadzwonić po wywołania funkcji (MostraDropDownList).

i trzeba użyć zamiast tego zastosowania „” myFormType przekazać parametry.

Dzięki.

Odpowiedział 18/12/2018 o 11:34
źródło użytkownik

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