JQuery noob здесь, я пытаюсь заставить появляться / исчезать 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>
Для создания формы я использую WTForm из FLASK, при необходимости вот код:
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, если в форме выбран порядок, или снова скрыть div, если выбран другой параметр, тогда я сделаю то же самое для остальных выберите и поделите, как только мне удастся заставить его работать.
Спасибо за чтение!
Редактировать 1: Мой первый выбор, который управляет первым скрытием / показом, form.type, он содержит 3 варианта: СЧЕТ, ЗАКАЗ, SERVICE_REQUEST
Когда я выбираю INVOICE или SERVICE_REQUEST, все должно остаться скрыть, потому что опция thous на данный момент не готова, но когда я выбираю ORDER, я sh показываю divs #ORDER и #block. #ORDER содержит все остальные элементы div, определяющие c для опции ORDER, #block содержит другой элемент выбора, который заставляет появляться / исчезать другой элемент div в зависимости от выбранной опции.
Вот изображение, которое нужно показать фактическая форма без скрытия
Первый выбор - «Тип», он должен отображаться как «Блок», если выбран порядок, и «Создание блока» отображается как «Чемпионы» в зависимости от выбранной опции.
Редактировать 2: БОЛЬШИЕ НОВОСТИ, я только что узнал, в чем заключалась моя проблема, я так глуп, что сначала этого не видел, я использовал один и тот же идентификатор для div и для выбора WTForm ... так что в основном я проверял наличие изменений для Div, а не для избранных ... Я просто чувствую себя настолько глупо сейчас, спасибо за попытку помочь мне!