How can I link one radio button on click to display a different drop down while hiding the one currently selected in the same location?

Question

As explained above, I would like my second radio button (single) to be able to display the second form (commented below) when it is clicked, and then be able to hide the current form (group). Thank you to anyone willing to help ahead of time.

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

If you're just looking to toggle the visibility of the dropdowns when selected then this should be a good place to get you started. Just toggle the visibility style attribute when the user clicks a radio button.

 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'; })

By default make the form2 display:none

 #form2{ display: none; }

After the user click radio(with id of 'single') then the form2 wil be displayed.