英文:
Show forms based on dropdown menu: javascript and html
问题
你有这个HTML，我想根据从下拉菜单中选择的值来显示不同的表单。根据这个答案，我提出了以下解决方案，但它并不如我所愿，也就是说，无论选择什么，所有表单都从一开始就显示出来。
我还尝试了JavaScript函数的其他版本，但没有太大的成功。这个HTML应该通过Flask函数呈现。感谢任何建议。
英文:
I have this html, in which I want to show different forms, based on a value chosen from a dropdown menu. Base on this answer I came up with this solution, which does not do what I intend, meaning all the form are shown from the beginning, no matter the choice.
{% 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 %}
I also tried other version of the javascript function, without much of a success. This html is supposed to be rendered through flask function.
Any suggestion is appreciated.
答案1
得分: 0
将它们包装在一个容器中，隐藏它，然后切换每个，除了选定的一个。
尝试这个：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/new-simulation" method='POST'>
<div class="mb-3">
<div class="mb-3">
<label for="info_type" class="form-label">信息类型</label>
<select class="form-select" id="info_type" name="info_type">
<option value="choose">--选择--</option>
<option value="general">一般查询</option>
<option value="credit">信用查询</option>
<option value="payment">付款问题</option>
</select>
</div>
<div class="hidden">
<div class="general" id="general">
<label for="select">您是如何得知我们的？<span>*</span></label>
<br>
<select name="case" id="case-type">
<option value="value1">选项 1</option>
</select>
<br>
</div>
<div class="credit" id="credit">
<label for="Date of Inquiry">查询日期<span>*</span></label>
<input type="date">
<label for="Agency">机构 3<span>*</span></label>
<input type="text">
</div>
<div class="payment" id="payment">
<label for="Service Phone Number">服务电话号码<span>*</span></label>
<input type="text">
<label for="select">主题<span>*</span></label>
<br>
<select name="case" id="case-type">
<option value="topic1">主题 1</option>
</select>
<br>
<br>
</div>
</div>
<div class="row mb-3">
<div class="col">
<button style="margin:5px;" class="btn btn-secondary" type="submit">提交</button>
</div>
</div>
</div>
</form>
英文:
Wrap them in a container, hide it, and then toggle each except the selected one.
Try this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#info_type").change(function(){
var value = $(this).val();
if(value == 'choose') return;
$("#" + value).toggle().siblings().hide();
});
<!-- language: lang-css -->
.hidden div {
display: none;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="choose">--Choose--</option>
<option value="general">General Inquiry</option>
<option value="credit">Credit Inquiry</option>
<option value="payment">Payment Issue</option>
</select>
</div>
<div class="hidden">
<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>
</div>
<div class="row mb-3">
<div class="col">
<button style="margin:5px;" class="btn btn-secondary" type="submit">submit</button>
</div>
</div>
</div>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论