1

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

我想那样做，

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

1 回答 1

0

在这里检查jsfiddle

我想这就是你想要的。如果不是，请告诉我。

我不确定你的 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';
    }
}
于 2013-07-07T13:01:43.593 回答