如何在单击时链接一个单选按钮以显示不同的下拉菜单，同时将当前选择的单选按钮隐藏在同一位置？

Question

如上所述，我希望我的第二个单选按钮（单个）能够在单击时显示第二个表单（如下注释），然后能够隐藏当前表单（组）。 感谢任何愿意提前提供帮助的人。

<!--Using HTML, CSS, and JavaScript is preferred-->
    <div class="box3-flex">
      <h4 class="name">Name:</h4>

      <form id="form1" class="form">
        <select name="sendingfrom" class="click-op">
          <option value="group-select">arm</option>
          <option value="group-select">all</option>
        </select>
      </form>
    
      <!--This is the form I would like to link to the radio button "single"-->
      <form id="form2" class="form">
        <select name="sendingfrom" class="click-op">
          <option value="group-select">position</option>
          <option value="group-select">velocity</option>
        </select>
      </form>
    
      <input type="radio" id="group" name="group-or-single" value="group">
        <label for="group">Group</label>
    
      <input type="radio" id="single" name="group-or-single" value="single">
        <label for="single">Single</label>
    </div>
    
    <style>
      div.box3-flex {
        display: flex;
        margin-top: 30px;
      }
    
      h4.name {
        margin: 3px 0px;
      }
    
      select.click-op {
        padding: 5px 160px 5px 5px;
        margin-left: 5px;
      }
    </style>

Answer 1

如果您只是想在选择时切换下拉菜单的可见性，那么这应该是您入门的好地方。 只需在用户单击单选按钮时切换可见性样式属性。

 function single() { var groupForm = document.getElementById('form1'); var singleForm = document.getElementById('form2'); groupForm.style.visibility = 'hidden'; singleForm.style.visibility = 'visible'; } function group() { var groupForm = document.getElementById('form1'); var singleForm = document.getElementById('form2'); singleForm.style.visibility = 'hidden'; groupForm.style.visibility = 'visible'; }

 div.box3-flex { display: flex; margin-top: 30px; } h4.name { margin: 3px 0px; } select.click-op { padding: 5px 160px 5px 5px; margin-left: 5px; }

 <div class="box3-flex"> <h4 class="name">Name:</h4> <form id="form1" class="form"> <select name="sendingfrom" class="click-op"> <option value="group-select">arm</option> <option value="group-select">all</option> </select> </form> <form id="form2" class="form"> <select name="sendingfrom" class="click-op"> <option value="group-select">position</option> <option value="group-select">velocity</option> </select> </form> <input type="radio" id="group" name="group-or-single" value="group" onclick="group()"> <label for="group">Group</label> <input type="radio" id="single" name="group-or-single" value="single" onclick="single()"> <label for="single">Single</label> </div>

Answer 2

 const radio = document.getEelmentById('single'); const form = document.getElementById('form2'); radio.addEventListener('click', () => { form.style.display = 'block'; })

默认情况下，使 form2 显示：无

 #form2{ display: none; }

用户单击单选（ID 为“single”）后，将显示 form2。