基于选择选项的 JQuery 隐藏/显示 div

Question

JQuery noob here, I'm trying to make appear/disappear divs depending on multiple form select options. My problem is that the div hide successfully, but I can't manage to make them appear back again when an option is selected.

Here is my JQuery code

<script type="text/javascript">
    $(document).ready(function () {
        $('#areaFields').hide();
        $('#areaItems').hide();
        $('#areaPartners').hide();
        $('#hidden3').hide();
        $('#items').hide();
        $('#partners').hide();
        $('#fields').hide();
        $('#hidden2').hide();
        $('#block').hide();
        $('#ORDER').hide();
        $('#type').change(function () {
            $('#ORDER').hide();
            $('#' + $(this).val()).show();
        });
    });
</script>

and here is my HTML

<div class="container">
<div class="content-section">
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <fieldset class="form-group">
            <legend class="border-bottom mb-4">Customizing</legend>
            <div class="container">
                <div class="form-group default1">
                    <div class="row">
                        <div class="col">
                            <div id="taille" class="form-group">
                                {{ form.tailleDocX.label }}
                                {{ form.tailleDocX }}
                                {{ form.tailleDocY.label }}
                                {{ form.tailleDocY }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div id="type" class="form-group">
                                {{ form.type.label }}
                                {{ form.type }}
                            </div>
                        </div>
                        <div class="col">
                            <div id="customer" class="form-group">
                                {{ form.customer.label }}
                                {{ form.customer }}
                            </div>
                        </div>
                    </div>
                </div>

                <div id="ORDER" class="form-group">
                    <hr>
                    <div class="row">
                        <div class="col">
                            <div id="block" class="form-group">
                                {{ form.block.label }}
                                {{ form.block }}
                            </div>
                        </div>
                    </div>

                    <div id="hidden2" class="form-group">
                        <hr>
                        <div class="row">
                            <div class="col">
                                <div id="items" class="form-group">
                                    {{ form.itemsFields.label }}
                                    {{ form.itemsFields }}
                                </div>
                                <div id="partners" class="form-group">
                                    {{ form.partnersFields.label }}
                                    {{ form.partnersFields }}
                                </div>
                                <div id="fields" class="form-group">
                                    {{ form.fields.label }}
                                    {{ form.fields }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="hidden3" class="form-group">
                        <hr>
                        <div class="row">
                            <div class="col">
                                <div id="areaFields" class="form-group">
                                    {{ form.areaFields }}
                                </div>
                                <div id="areaItems" class="form-group">
                                    {{ form.areaItems }}
                                </div>
                                <div id="areaPartners" class="form-group">
                                    {{ form.areaPartners }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group default2">
                        <hr>
                        <div class="row">
                            <div class="col">
                                {{ form.submit }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>

To create the form I'm using WTForm from FLASK, if needed here is the code :

class AreaFields(FlaskForm):
    area1 = IntegerField("X0")
    area2 = IntegerField("X1")
    area3 = IntegerField("Y0")
    area4 = IntegerField("Y1")
    textArea = StringField("Texte")


class AreaItems(FlaskForm):
    name = StringField("Name")


class AreaPartners(FlaskForm):
    area1 = IntegerField("X0")
    area2 = IntegerField("X1")
    area3 = IntegerField("Y0")
    area4 = IntegerField("Y1")
    rolePartners = SelectField("Role", id="role")


class AjouterForm(FlaskForm):
    type = SelectField("Type",
                       choices=[("INVOICE", "invoice"), ("ORDER", "order"), ("SERVICE_REQUEST", "service_request")],
                       id="type")
    block = SelectField("Block", choices=[("ITEMS", "items"), ("PARTNERS", "partners"), ("fields", "fields")],
                        id="block")
    itemsFields = SelectField("Champs", id="items")
    partnersFields = SelectField("Champs", id="partnersFields")
    fields = SelectField("Champs", id="fields")
    tailleDocX = IntegerField("Taille X", validators=[DataRequired()])
    tailleDocY = IntegerField("Taille Y", validators=[DataRequired()])
    customer = SelectField("Customer", choices=[("NotFinalData", "NotFinalData")])
    areaFields = FormField(AreaFields)
    areaItems = FormField(AreaItems)
    areaPartners = FormField(AreaPartners)
    submit = SubmitField('Voir le résumer')

For the moment what I want is : to hide all the div like I did, then show the div #ORDER if order is selected in the form, or to hide the div again if another option is selected, then I'll do the same for the others select and div once I can manage to make it work.

Thanks for reading !

Edit 1 : My first select that manage the first hide/show is form.type , it contains 3 options : INVOICE, ORDER, SERVICE_REQUEST

When I select INVOICE or SERVICE_REQUEST, everything must stay hide because thoose option aren't ready for the moment, but when I select ORDER, I wish to make appear the divs #ORDER and #block. #ORDER contains all the other divs specific to the ORDER option, #block contain another select that will make appear/disappear another div depending on the option selected.

Here is a picture to show the actual form without being hidden

The first select is Type, it must make appear Block if order is selected, and block make appear a Champs depending on the option selected.

Edit 2 : BIG NEWS, I just found out what was my problem, it's so dumb of me for not seeing this at first, I used the same ID for the div and for the WTForm select... so basicly I was checking for changement for the div and not for the select... I just feel so dumb right now, thank you for trying to help me !

Answer 1

You just have to hide only the element your previously showed. your code should look like this.

<script type="text/javascript">
    $(document).ready(function () {
        var current_element = '';

        $('#areaFields').hide();
        $('#areaItems').hide();
        $('#areaPartners').hide();
        $('#hidden3').hide();
        $('#items').hide();
        $('#partners').hide();
        $('#fields').hide();
        $('#hidden2').hide();
        $('#block').hide();
        $('#ORDER').hide();
        $('#type').change(function () {

            var id = $(this).val()
            $('#' + id).show();

            // hide previously showed element
            if(current_element != '') $('#' + current_element).hide();

            // store id of previously selected element
            current_element = id
        });
    });
</script>