多步選擇框在HTML和Javascript

Question

我想創建一個HTML表單與2嵌套的選擇框，

我想去做的是，

1選擇框，並且用戶可以選擇 現代或古代。我做的 ;

如果用戶選擇古，新的選項是：

Age : (textfield) 
Determined By: (text field) 
Age By c-14 testing 

而且，

If C14 testing is performed 
Name of the body performing the test 
Date of testing 

這裏是我的HTML至今：

<select name="storedinage" id="storedinage" onchange="showfield7(this.options[this.selectedIndex].value)"> 
<option>Please Select</option> 
<option value="Modern" >Modern</option> 
<option value="Ancient" >Ancient </option> 

和我的JavaScript是在這裏：

<script type="text/javascript"> 
function showfield7(name){ 
    if(name=='Ancient')document.getElementById('div7').innerHTML='Other: <input type="text" name="storedinage" />'; 
    else document.getElementById('div7').innerHTML=''; 
} 
</script> 

Answer 1

檢查jsfiddle here

我想這是你想要的。否則，請告知我。

我不確定你的html是怎麼樣的，所以我做了一些我自己的，請複製一下有用的東西。不知道是否要在輸入或佔位符上添加標籤，您將不得不做這些小的調整。

HTML

<form action="#" method="post"> 
    <select name="storedinage" id="storedinage" onchange="showfield(this.options[this.selectedIndex].value)"> 
     <option>Please Select</option> 
     <option value="Modern">Modern</option> 
     <option value="Ancient">Ancient</option> 
    </select> 
    <div id="div7" style="display:none;"> 
     Age:<input type="text" name="storedinage" /> 
     Determined By:<input type="text" name="DeterminedBy" /> 
     Age By c-14 testing?<input type="checkbox" onchange="C14(this)" name="AgeByc-14testing" /> 
    </div> 
    <div id="C14" style="display:none;"> 
     <input type="text" name="NameBody" placeholder="Name of the body performing the test" /> 
     <input type="text" name="TestingDate" placeholder="Date of testing" /> 
    </div> 
</form> 

JS

function showfield(name) { 
    console.log('!'); 
    if (name == 'Ancient') { 
     console.log('passed'); 
     document.getElementById('div7').style.display = 'inline'; 
    } else { 
     document.getElementById('div7').style.display = 'none'; 
    } 
    var checkbox = document.getElementById('C14'); 
    if (checkbox.checked == true) { 
     console.log('true') 
    } 
} 

function C14(e) { 
    if (e.checked == true) { 
     document.getElementById('C14').style.display = 'inline'; 
    } 
}