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

Question

I'm using Asp.NetCore, C#,Ajax javascript and jquery.I created a Model Component in my application. the model component is shown but the hidden element didn't show. when I choose my option in the Axe option it doesn't show any one of the GRaison / DRaison / PRaison / CRaison. I try it with "show" and doesn't work even I set the option: selected and doesn't work too. I don't have any idea to make this code work here's the page:

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

Answer 1

when I choose my option in the Axe option it doesn't show any one of the GRaison / DRaison / PRaison / CRaison. I try it with "show" and doesn't work even I set the option: selected and doesn't work too.

Firstly, we can find that you set id="Axeya ij" for select in your code as below, which would cause you can not get that element using $("#Axe") .

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

Secondly, if you check the source code of your hidden element after you run .hide() method, you can find it would help add style="display: none;" inline style to the element(s), it does not add hidden attribute.

To fix the issue and achieve your requirement, you can try to modify the code like below.

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