創建可摺疊的應用程序表格

-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

我剛剛接受，再次感謝 –

創建可摺疊的應用程序表格

回答

相關問題