Как связать radiobutton с select?

360

19 июня 2017, 22:35

Доброго времени. Как сделать так, чтоб при выборе в radio какого-то значение, то select переключался на это же значение?

<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 1

Вариант без jQuery с использованием индексов вместо 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

Answer 2

Нужно добавить в оба тега атрибуты value, после чего на основании значения этого атрибута у input выбирать соответствующее значение у select, по событию change, которое будет слушаться у input.

$("input[name=select]").on("change", function(){ 
$("select").val($(this).val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<select> 
<br> 
<input name="select" type="radio" value="1">1<br> 
<input name="select" type="radio" value="2">2<br> 
<input name="select" type="radio" value="3">3<br> 
<input name="select" type="radio" value="4">4<br> 
<input name="select" type="radio" value="5">5