php - HTML 和 Javascript 中的多步选择框

Question

我想创建一个带有 2 个嵌套选择框的 html 表单，

我也想这样做，

1个选择框，用户可以选择 现代或古代。我做到了；

如果用户选择 ancient ，新的选项是:

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