我正在尝试创建一个页面,用户必须根据彼此进行多项选择.如何创建一个表单,以便根据用户在下拉菜单#1中的选择显示特定类型的下拉菜单#2.
例如,假设用户必须选择“产品类别”和“产品子类别”.如果用户从第一个下拉菜单中选择“床上用品”,则会自动显示第二个下拉菜单,其中包含“床,床垫,枕头”等选项.
为了进一步说明这个例子,假设用户选择“电子产品”而不是“床上用品”.然后第二个下拉菜单会有“电视,MP3播放器,电脑”等选项.
怎么会这样做呢?你会用HTML / CSS或其他形式做些什么吗?
谢谢您的帮助!
编辑 – 我正在使用Django / Python来构建这个网站以及HTML,CSS和Javascript.
解决方法
您可以结合使用HTML和
JavaScript(
JSFIDDLE):
<select id="opts" onchange="showForm()"> <option value="0">Select Option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <div id="f1" style="display:none"> <form name="form1"> <select id="opts" onchange="showForm()"> <option value="0">Select Option</option> <option value="1">Option 1A</option> <option value="2">Option 1B</option> </select> </form> </div> <div id="f2" style="display:none"> <form name="form2"> <select id="opts" onchange="showForm()"> <option value="0">Select Option</option> <option value="1">Option 2A</option> <option value="2">Option 2B</option> </select> </form> </div> <script type="text/javascript"> function showForm() { var selopt = document.getElementById("opts").value; if (selopt == 1) { document.getElementById("f1").style.display = "block"; document.getElementById("f2").style.display = "none"; } if (selopt == 2) { document.getElementById("f2").style.display = "block"; document.getElementById("f1").style.display = "none"; } if (selopt == 0) { document.getElementById("f2").style.display = "none"; document.getElementById("f1").style.display = "none"; } } </script>
原文地址:https://www.jb51.cc/js/150818.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。