英文:
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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论