JQuery hide/show div 基于 select 选项

Question

JQuery 菜鸟，我正在尝试根据多种形式 select 选项制作 appear/disappear divs。我的问题是 div 隐藏成功了，但是当一个选项被 selected 时，我无法设法让它们再次出现。

这是我的 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，然后显示 div #ORDER 如果订单在表格中被 selected，或者如果另一个选项是 selected，我会再次隐藏 div，然后我将对其他 select 和 div 做同样的事情，一旦我能设法让它工作。

感谢阅读！

编辑 1：我管理第一个 hide/show 的第一个 select 是 form.type，它包含 3 个选项：INVOICE、ORDER、SERVICE_REQUEST

当我 select INVOICE 或 SERVICE_REQUEST 时，所有内容都必须隐藏，因为目前还没有准备好这些选项，但是当我 select ORDER 时，我希望显示divs #ORDER 和#block。 #ORDER 包含特定于 ORDER 选项的所有其他 div，#block 包含另一个 select，这将使 appear/disappear 成为另一个 div，具体取决于选项 select编辑

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

第一个 select 是 Type，如果顺序是 selected，它必须使出现 Block，并且根据选项 selected，block 使出现 Champs。

编辑 2：大新闻，我刚刚发现我的问题是什么，一开始没有看到这个我真是太蠢了，我为 div 和 WTForm [= 使用了相同的 ID 59=]... 所以基本上我是在检查 div 的变化而不是 select... 我现在感觉很蠢，谢谢你试图帮助我！

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>

JQuery hide/show div 基于 select 选项

JQuery hide/show div based on select options

html

javascript

jquery

flask-wtforms