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

Question

这里是jQuery菜鸟，我试图根据多个表单选择选项使div出现/消失。我的问题是div隐藏成功，但是当选择一个选项时，我无法使它们再次出现。

这是我的JQuery代码

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

这是我的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>

要创建我正在使用FLASK中的WTForm的表单，如果需要，这里的代码是：

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')

目前，我想要的是：像我一样隐藏所有div，如果在表单中选择了order，则显示div #ORDER，或者如果选择了另一个选项，则再次隐藏div，那么我会做一旦我设法使它工作，其他选择和div相同。

感谢阅读！

编辑1：管理第一个隐藏/显示的第一个选择是form.type，它包含3个选项：INVOICE，ORDER，SERVICE_REQUEST

[当我选择INVOICE或SERVICE_REQUEST时，所有内容都必须保持隐藏状态，因为暂时还没有准备好的选项，但是当我选择ORDER时，我希望显示divs #ORDER和#block。 #ORDER包含特定于ORDER选项的所有其他div，＃block包含另一个选择，根据选择的选项，该选择将使另一个div出现/消失。

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

第一个选择是类型，如果选择了订单，则必须使它显示为块，并且根据所选择的选项，块使显示为Champs。

编辑2：大新闻，我只是发现我的问题，我一开始没看到这个真是愚蠢，我为div和WTForm select使用了相同的ID ...所以基本上我正在检查对于div的更改而不是选择的更改...我现在只是觉得很傻，谢谢您为我提供的帮助！

Answer 1

您只需要隐藏先前显示的元素。您的代码应如下所示。

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