[英]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?
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>
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>
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 显示:无
#form2{ display: none; }
After the user click radio(with id of 'single') then the form2 wil be displayed.用户单击单选(ID 为“single”)后,将显示 form2。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.