[英]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?
如上所述,我希望我的第二個單選按鈕(單個)能夠在單擊時顯示第二個表單(如下注釋),然后能夠隱藏當前表單(組)。 感謝任何願意提前提供幫助的人。
<!--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>
如果您只是想在選擇時切換下拉菜單的可見性,那么這應該是您入門的好地方。 只需在用戶單擊單選按鈕時切換可見性樣式屬性。
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'; })
默認情況下,使 form2 顯示:無
#form2{ display: none; }
用戶單擊單選(ID 為“single”)后,將顯示 form2。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.