创建可折叠的申请表

Question

我想创建一个 html 应用程序表单页面，顶部会有一个下拉菜单。根据从该下拉菜单中选择的值，下拉菜单下方的区域将展开并有一些带有标签的输入文本框。由于我是 Web 开发的新手，我会非常乐意使用简单易懂的形式。 您能否分享模板或您的解决方案来实现此功能？ 我没有enter code here

<form action="/action_page.php">
  <select name="occupation">
    <option value="student">Student</option>
    <option value="academician">Academician</option>    
  </select>
</form>

如何从那里着手？任何建议或建议，链接都意味着很多。

Answer 1

没有 JS 和 CSS 是不可能的，你必须使用任何客户端脚本来让你的 DOM 元素交互，我在这里添加一个示例代码：

您可以通过使用一些动画和使用 jQuery 来进一步自定义它，使您更轻松。

var selEle = document.getElementById("formSelector");
selEle.onchange = function(){
    var selectedVal = selEle.options[selEle.selectedIndex].value;
    var allSections = document.getElementsByClassName("form-section");          
    for(var i = 0; i < allSections.length; i++){
      var ele = allSections.item(i);
      if(ele.id == selectedVal){
        ele.style.display = "block";
      }
      else{
         ele.style.display = "none";
      }
    }
}

<form>
<label for="sectionSelector">Select Form Section</label>
<select id="formSelector" name="sectionSelector" onchange="runActFun(this)">
<option value="">-Select-</option>
<option value="section1">show Section Form 1</option>
<option value="section2">show Section Form 2</option>
</select>
<br/>
<br/>
<div id="section1" class="form-section" style="display:none;">
<label for="input1_1">Input 1.2</label>
<input type="text" name="input1_1"></input>
<br/>
<br/>
<label for="input1_2">Input 1.2</label>
<input type="text" name="input1_2"></input>
</div>
<div id="section2" class="form-section" style="display:none;">
<label for="input2_1">Input 2.1</label>
<input type="text" name="input2_1"></input>
<br/>
<br/>
<label for="input2_2">Input 2.2</label>
<input type="text" name="input2_2"></input>
</div>

</label>

</form>