选择单选按钮后的下拉列表

Question

我创建了一组 2 个单选按钮。如果选择 'Yes'，将出现一个下拉列表。可以选择下拉列表中的任何选项。如果用户选择 'Front Desk Officer' 选项，下面会出现两个单选按钮，其中包含 'Receptionist' 和 'Clerk' 选项。如果用户选择选项 'Others'，将出现一个可选的文本框，供用户键入未在下拉列表中列出的位置。直到这部分对我来说都很好。

如果 'No' 单选按钮被选中，我想要创建另一个下拉列表。第二个下拉列表将由 'Front Desk Officer' 和 'Others' 组成。如果用户选择 'Front Desk Officer' 选项，下面会出现两个单选按钮，其中包含 'Receptionist' 和 'Clerk' 选项。如果用户选择选项 'Others'，将出现一个可选的文本框，供用户键入未在下拉列表中列出的位置。

这是因为 FDO 工作和其他工作可以应用于永久工作和救济工作。我尝试创建另一个 div 但我知道我不能两次使用相同的 ID。我该如何解决？

我已经在 link - 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>

Answer 1

我对您的代码进行了快速而粗略的增强，请看一下。

我想你明白了，但我建议如下：

外包 onClick 方法，让您的代码更具可读性
还要确保当用户更改选项 "yes to no" 或相反时，我称为 smalllist 和 fulllist 的 div 再次隐藏。

为防止存储用户从未真正选择过的选项，请添加一个具有空值的选项。

<select name="Position1" id="Position1" onchange='checkPhyDis(this.value)'>
    <option value="">Please choose an option..</option>
    <option value="Senior Security Officer (SSO)">Senior Security Officer (SSO)</option>
    <option value="Supervisor (SS)">Supervisor (SS)</option>
    <!-- your other options... -->
</select>

然后，默认选择一个空选项（因此这个空值的选项必须始终位于其他选项的顶部！）

Link to Jsfiddle

第二种方法是通过 javascript 禁用选项。通过这样做，选项对用户可见但不可选择。

选择单选按钮后的下拉列表

Dropdown lists after radio buttons are selected

html

javascript

php

html-select

radio-button