如何使用下拉列表对单选按钮进行逻辑分组

Question

 function radioCheck() { document.getElementById("last").checked = "checked"; }

 <label> <input type="radio" name="Ppub" value="" checked="checked">All Dates </label> <br> <label> <input type="radio" id="last" name="Ppub" value=""> Last </label> <select name="Ppub" id="selectRange" value="" onchange="radioCheck();"> <option value="">Select</option> <option value="20181220-20190120">month</option> <option value="20180720-20190120">6 months</option> <option value="20180120-20190120">year</option> </select>

I am working on a search form and I have a group of radio buttons to filter the search. For one of the radio buttons, I want it to be "linked" to a drop down menu.

I am able to make the status of the radio button "checked" when the user selects an item from the menu. However, if the user checks another radio button, the value of the selected item is still used.

How do I group the radio button and drop down menu? I tried putting them in the same label but to no avail.

Answer 1

You have to reset the drop down on clicking the radio button. Also I can not find any reason to the name of the drop down as it is the same of the radio buttons.

Please Notice the changes in the value attribute changes of the radio buttons.

 var radio = document.querySelector('[value=all]'); radio.onclick = function(){ document.getElementById("selectRange").selectedIndex = 0; } function radioCheck() { document.getElementById("last").checked = "checked"; }

 <label> <input type="radio" name="Ppub" value="all" checked="checked">All Dates </label> <br> <label> <input type="radio" id="last" name="Ppub" value="last"> Last </label> <select id="selectRange" value="" onchange="radioCheck();"> <option value="">Select</option> <option value="20181220-20190120">month</option> <option value="20180720-20190120">6 months</option> <option value="20180120-20190120">year</option> </select>

May be the following can help you to achieve what you are looking for (Plesae notice the changes in the HTML, the wrapping div with each group of radio and select).

 var radioAll = document.querySelectorAll('[type=radio]'); radioAll.forEach(function(r){ r.onclick = function(){ var ddAll = document.querySelectorAll('select'); ddAll.forEach(function(s){ s.selectedIndex = 0; }); } }); function radioCheck(el) { var input = el.parentNode.querySelector('[name=Ppub]'); input.checked = "checked"; }

 <label> <input type="radio" name="Ppub" value="all" checked="checked">All Dates </label> <br> <div> <label> <input type="radio" id="last" name="Ppub" value="last"> Last </label> <select id="selectRange" value="" onchange="radioCheck(this);"> <option value="">Select</option> <option value="20181220-20190120">month</option> <option value="20180720-20190120">6 months</option> <option value="20180120-20190120">year</option> </select> </div> <div> <label> <input type="radio" name="Ppub" value=""> Cutom range </label> <select value="" onchange="radioCheck(this);"> <option value="">Select</option> <option value="20181220-20190120">Test1</option> <option value="20180720-20190120">Test2</option> <option value="20180120-20190120">Test3</option> </select> </div>