How to logically group a radio button with a drop down list

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.

However, if the user checks another radio button, the value of the selected item is still used. Can you elaborate on this? — Aaron
can you please post your expectation. I think you are expecting - when radio changes the drop-down value should be reset or not considered. You can put a check on radio onChange first and then select onChange. — Kaushik
@Kaushik sorry for not being clear, yes I expect the drop down value to be ignored when another radio button is selected — nic guo
@nicguo you write a function for onRadioChange in that function first check what is value of radio and then decide what to do. — Kaushik

Mamun Mamun · Accepted Answer · 2019-01-21T04:17:31

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>

How to logically group a radio button with a drop down list

1 Answers