【发布时间】：2018-01-01 02:06:15
【问题描述】：
我创建了一组 2 个单选按钮。如果选择“是”，将出现一个下拉列表。可以选择下拉列表中的任何选项。如果用户选择“前台人员”选项，下面会出现两个单选按钮，分别是“接待员”和“文员”。如果用户选择“其他”选项，则会出现一个可选文本框，供用户输入下拉列表中未列出的职位。直到这部分对我都有好处。
如果选择了“否”单选按钮，我想要创建另一个下拉列表。第二个下拉列表将包括“前台人员”和“其他”。如果用户选择“前台人员”选项，下面会出现两个单选按钮，分别是“接待员”和“文员”。如果用户选择“其他”选项，则会出现一个可选文本框，供用户输入下拉列表中未列出的位置。
这是因为 FDO 工作和其他工作可以同时应用于永久和救济工作。我尝试创建另一个 div，但我知道我不能两次使用相同的 id。我该如何解决？
我在链接中提供了代码 - https://jsfiddle.net/7ksatyaq/
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function checkPhyDis(phydis) {
//Hide all jobs
var tasks = document.querySelectorAll("#task1, #task2");
[].forEach.call(tasks, function(task) {
task.style.display = 'none';
})
if (phydis === "Front Desk Officer (FDO)")
document.getElementById('task1').style.display = 'block';
else if (phydis === "Others")
document.getElementById('task2').style.display = 'block';
}
</script>
</head>
<body>
<h3 style="text-decoration: underline">Position Applied -</h3>
<p>
<b>Permanent or Relief?</b><b style="color: red"> *</b>
<div class="editfield">
<label><input type="radio" class="PR" name="PermRelief" id="yesid" value="Yes" onclick="document.getElementById('PermRelief').style.display='block'" required> Yes </label>
<label><input type="radio" class="PR" name="PermRelief" id="noid" value="No" onclick="document.getElementById('PermRelief').style.display='none'" required> No </label>
</div>
<div class="editfield" id="PermRelief" style="display:none">
<label for="Position1">Permanent Job:</label>
<br>
<select name="Position1" id="Position1" onchange='checkPhyDis(this.value)'>
<option value="Security Officer (SO)">Security Officer (SO)</option>
<option value="Senior Security Officer (SSO)">Senior Security Officer (SSO)</option>
<option value="Supervisor (SS)">Supervisor (SS)</option>
<option value="Senior Supervisor (SSS)">Senior Supervisor (SSS)</option>
<option value="Chief Security Officer (CSO)">Chief Security Officer (CSO)</option>
<option value="Security Executive (SE)">Security Executive (SE)</option>
<option value="Operation Executive (OE)">Operation Executive (OE)</option>
<option value="Front Desk Officer (FDO)">Front Desk Officer (FDO)</option>
<option value="Others">Others</option>
</select>
<div id="task1" name="Position1" style="display:none;">
<label><input type="radio" name="FDO" id="Receptionistid" value="Receptionist"> Receptionist </label>
<label><input type="radio" name="FDO" id="Clerkid" value="Clerk"> Clerk </label> <br>
</div>
<div id="task2" name="Position1" style="display:none;">
<label for="Others">If the position you want to apply is not stated in any of the options <br> please state in the box below:</label>
<br>
<textarea rows="4" cols="50" name="Other_Position" id="Other_Position"></textarea>
</div>
</div>
</p>
</body>
</html>
【问题讨论】：
标签： javascript php html radio-button html-select