5

Как сделать так, чтоб при выборе в 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
1
  • Вообще правильный ответ на этот вопрос: использовать для этого нормальную библиотеку с binding'ами. К примеру, angular, react, knockout и т.д. Commented 20 июн. 2018 в 7:47

2 ответа 2

4

Вариант без 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

4

Нужно добавить в оба тега атрибуты 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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.