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使您更容易。

＆＃13;

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";
      }
    }
}

＆＃13;

<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>

＆＃13;

创建可折叠的申请表

1 个答案: