javascript – How to bind radiobutton to select?

Question:

How to make it so that when you select a value in radio, then select switches to the same value?

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
<select>

<input name="select" type="radio">1
<input name="select" type="radio">2
<input name="select" type="radio">3
<input name="select" type="radio">4
<input name="select" type="radio">5

Answer:

A non-jQuery option using indices instead of value :

var select = document.querySelector('select');
var inputs = document.querySelectorAll('input[name="select"]');

for (const i in inputs) {
  if (inputs.hasOwnProperty(i)) {
    inputs[i].addEventListener('change', function () {
      select.selectedIndex = i;
    });
  }
}
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<select>
<br>
<input name="select" type="radio">1
<input name="select" type="radio">2
<input name="select" type="radio">3
<input name="select" type="radio">4
<input name="select" type="radio">5

JSFiddle

Scroll to Top