我有一个html,我想在其中显示不同的表单,基于从下拉菜单中选择的值,基于this answer,我想出了这个解决方案,它没有做我想要的,这意味着所有的表单都从一开始显示,无论选择。
{% extends "base.html" %}
{% block title %}Information {{configuration}} {% endblock %}
{% block content %}
<div class="px-2 py-5">
<h3> info {{configuration}}</h3>
<p>Here you can input the necessary informations </p>
<form action="/new-simulation" method='POST'>
<div class="mb-3">
<div class="mb-3">
<label for="info_type" class="form-label">info Type</label>
<select class="form-select" id="info_type" name="info_type">
<option value="general">General Inquiry</option>
<option value="credit">Credit Inquiry</option>
<option value="payment">Payment Issue</option>
</select>
</div>
<div class="general" id="general">
<label for="select">How did you find out about us?<span>*</span></label><br>
<select name="case" id="case-type">
<option value="value1">Value 1</option>
</select><br>
</div>
<div class="credit" id="credit">
<label for="Date of Inquiry">Date of Inquiry<span>*</span></label>
<input type="date">
<label for="Agency">Agency 3 <span>*</span></label>
<input type="text">
</div>
<div class="payment" id="payment">
<label for="Service Phone Number">Service Phone Number<span>*</span></label>
<input type="text">
<label for="select">Topic<span>*</span></label><br>
<select name="case" id="case-type">
<option value="topic1">Topic 1</option>
</select><br><br>
</div>
<script type="text/javascript">
// hide all the divs
$('div').hide()
// Show and hide selected div
$('#info_type').change(function () {
var value = this.value;
$('div').hide()
$('#' + this.value).show();
});
</script>
<div class="row mb-3">
<div class="col">
<button style="margin:5px;" class="btn btn-secondary" type="submit">submit</button>
</div>
</div>
</form>
</div>
{% endblock %}
我也尝试了其他版本的javascript函数,没有太大的成功。这个html应该是通过flask函数呈现的。任何建议都不胜感激。
1条答案
按热度按时间dwbf0jvd1#
将它们 Package 在容器中,隐藏它,然后切换除选定项之外的其他项。
试试这个: