创建可折叠的应用程序表格

-2

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

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

如何从那里继续？任何建议或建议，链接将意味着很多。

来源

2017-02-23 Martin Sergio

这离不开CSS和JS – Quentin

实现请提供你已经尝试了一些代码。 –

@Quentin确定我编辑了这个问题，谢谢 –

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

来源

2017-02-23 12:03:43 user2809299

非常感谢兄弟，你是救命的 –

接受这个答案让其他人知道解决方案 – user2809299

我刚刚接受，再次感谢 –

创建可折叠的应用程序表格

回答

相关问题