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

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。