Question

我创建了一组2个单选按钮。如果是，那么＆＃39;选中后，将出现一个下拉列表。可以选择下拉列表中的任何选项。如果用户选择了“前台管理员”选项，则会在下方显示两个单选按钮，其中包含“接待员”选项。＆安培; ＆＃39;店员＆＃39 ;.如果用户选择“其他”选项，则会显示一个可选文本框，供用户键入下拉列表中未列出的位置。直到这部分对我都有好处。

我想要的是创建另一个下拉列表，如果＆＃39;否＆＃39;单选按钮被选中。第二个下拉列表将包括＆＃39;前台官员＆＃39;和＆＃39;其他＆＃39;。如果用户选择了“前台管理员”选项，则会在下方显示两个单选按钮，其中包含“接待员”选项。＆安培; ＆＃39;店员＆＃39 ;.如果用户选择“其他人”选项，则会显示一个可选文本框，供用户输入下拉列表中未列出的位置。

这是因为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>

Answer 1

我对您的代码进行了快速而肮脏的增强，看看它。

我认为你得到了这个概念，但我建议如下：

外包onClick方法，因此您的代码更具可读性
当用户更改选项时，确保我调用smalllist和fulllist的div再次隐藏“＃yes; yes to no＆＃34;或相反亦然。

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

<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禁用选项。通过这样做，选项对用户可见，但不可选择。

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

1 个答案: