javascript - 我在模态组件中添加显示和隐藏，但它不起作用

Question

我正在使用 Asp.NetCore、C#、Ajax javascript 和 jquery。我在我的应用程序中创建了一个模型组件。显示模型组件，但未显示隐藏元素。当我在 Axe 选项中选择我的选项时，它不会显示 GRaison / DRaison / PRaison / CRaison 中的任何一个。我用“显示”尝试它，即使我设置了选项也不起作用：选中并且也不起作用。我不知道要让这段代码工作在这里的页面：

@model Segment
    

    <div class="modal fade" id="addSegment">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-uppercase text-white" style="height:5%;">
                    <h5 class="modal-title" id="addSegmentLabel">Create Segment</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                        <span>x</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        &nbsp; &nbsp; <label asp-for="SName" class="control-label">Name : </label>
                        <div class="col-md-12">
                            <form asp-action="Create">
                                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                                <div class="form-group">

                                    <input asp-for="SName" class="form-control" placeholder="Enter segment name" />
                                    <span asp-validation-for="SName" class="text-danger"></span>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group ">
                                            <label asp-for="SRang" class="control-label">Rang</label>
                                            <input asp-for="SRang" class="form-control" />
                                            <span asp-validation-for="SRang" class="text-danger"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label asp-for="SType" class="control-label">Type</label>
                                            <select asp-for="SType" class="form-control" id="SType">
                                                <option selected disabled>Selectionnez type..</option>
                                                <option id="Compte">Compte</option>
                                                <option id="Contact">Contact</option>
                                            </select>
                                            <span asp-validation-for="SType" class="text-danger"></span>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group ">
                                            <label asp-for="Description" class="control-label"></label>

                                            <textarea class="form-control" rows="3"></textarea>
                                            <span asp-validation-for="Description" class="text-danger"></span>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label asp-for="Axe" class="control-label"></label>
                                            <select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="Html.GetEnumSelectList<Axe>()">
                                                <option value="null" selected>Selectionnez Axe..</option>
                                            </select>
                                            <span asp-validation-for="Axe" class="text-danger"></span>
                                        </div>

                                        <div class="form-group" id="g" hidden>
                                            <label asp-for="GRaison" class="control-label">Raison</label>
                                            <select asp-for="GRaison" class="form-control">
                                                <option> Personalité  </option>
                                                <option> Soucis</option>
                                                <option>   Intérêt</option>
                                                <option>Valeurs</option>
                                            </select>
                                            <span asp-validation-for="GRaison" class="text-danger"></span>
                                        </div>
                                        <div class="form-group" id="d" hidden>
                                            <label asp-for="DRaison" class="control-label">Raison</label>
                                            <select asp-for="DRaison" class="form-control">
                                             
                                                <option> Age  </option>
                                                <option> Sexe</option>
                                                <option>    Education</option>
                                                <option>    Revenu</option>
                                            </select>
                                            <span asp-validation-for="DRaison" class="text-danger"></span>
                                        </div>

                                        <div class="form-group" id="p" hidden>
                                            <label asp-for="PRaison" class="control-label">Raison</label>
                                            <select asp-for="PRaison" class="form-control">
                                                <option> Personalité,  </option>
                                                <option> Soucis</option>
                                                <option>   Intérêt</option>
                                                <option>Valeurs</option>

</select>
                                            <span asp-validation-for="PRaison" class="text-danger"></span>
                                        </div>
                                        <div class="form-group" id="c" hidden>
                                            <label asp-for="CRaison" class="control-label">Raison</label>
                                            <select asp-for="CRaison" class="form-control">
                                             
                                                <option>  Pays</option>
                                                <option> Ville</option>
                                                <option> Language</option>
                                                <option> Population</option>
                                            </select>
                                            <span asp-validation-for="CRaison" class="text-danger"></span>
                                        </div>
                                    </div>
                                </div>


                            </form>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" data-save="modal">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        </div>

                @section Scripts{ 

                    <script src="~/lib/jquery/dist/jquery.js"></script>
                    <script type="text/javascript">
                        $(function () {
                           
                            $("#SType").change('pageload', function () {
                                if ($(this).val() == "Contact") {
                                    $(function () {
                                        $("#Axe").change('pageload', function () {
                                            if ($(this).val() == 0) {
                                                $("#g").removeAttr('hidden');
                                                $("#p,#c,#d").hide();
                                            } else if ($(this).val() == 1) {
                                                $("#p").removeAttr('hidden');
                                                $("#g,#c,#d").hide();
                                            } else if ($(this).val() == 2) {
                                                $("#c").removeAttr('hidden');
                                                $("#p,#g,#d").hide();
                                            } else {
                                                $("#d").removeAttr('hidden');
                                                $("#p,#c,#g").hide();
                                            }
                                        });
                                    });
                                } else {
                                    $("#g,#p,#c,#d").hide();
                                }
                            });
                        });   

                    
                       

                    </script>
                }

标签： javascriptc#jqueryajaxasp.net-core

Answer 1

当我在 Axe 选项中选择我的选项时，它不会显示 GRaison / DRaison / PRaison / CRaison 中的任何一个。我用“显示”尝试它，即使我设置了选项也不起作用：选中并且也不起作用。

首先，我们可以发现您在代码中设置id="Axeya ij"了select如下，这将导致您无法使用$("#Axe").

<select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="Html.GetEnumSelectList<Axe>()">

其次，如果您在运行.hide()方法后检查隐藏元素的源代码，您会发现它有助于style="display: none;"向元素添加内联样式，它不会添加hidden属性。

要解决此问题并满足您的要求，您可以尝试修改如下代码。

$(function () {
    $("#SType").change('pageload', function () {
        if ($(this).val() == "Contact") {
            $("select[name='Axe']").change('pageload',function () {                                    
                if ($(this).val() == 0) {
                    $("#g").removeAttr('hidden');
                    $("#g").show();
                    $("#p,#c,#d").hide();
                } else if ($(this).val() == 1) {
                    $("#p").removeAttr('hidden');
                    $("#p").show();
                    $("#g,#c,#d").hide();
                } else if ($(this).val() == 2) {
                    $("#c").removeAttr('hidden');
                    $("#c").show();
                    $("#p,#g,#d").hide();
                } else {
                    $("#d").removeAttr('hidden');
                    $("#d").show();
                    $("#p,#c,#g").hide();
                }
            });
        } else {
            $("#g,#p,#c,#d").hide();
        }
    });
});