Связывание переключателей с выпадающим меню

Question

Я надеялся завершить этот небольшой проект без использования каких-либо операторов управления потоком if / else / while / for / what и просто в простом javascript, но, похоже, у меня возникли проблемы. Я просто хочу подключить переключатели к выпадающему меню, чтобы при нажатии на одну из них выделялась другая. Например, сейчас я так понимаю, что когда вы выбираете элемент из выпадающего меню с помощью функции setRB (), он устанавливает значение true для соответствующей переключателя.

Теперь я бы хотел, чтобы радио-кнопка установила true для соответствующего пункта выпадающего меню. Может ли это быть сделано с условиями выше или мне нужно использовать операторы потока управления (я полагаю, это то, что они все называют).

Спасибо.

function setRb() {
  //Point to options list
  //var e = document.getElementById('selColors');
  var e = document.jon.resistors;
  //Get value of color selected
  var s = e.options[e.selectedIndex].value;
  //Now get radio button obect and check it
  var c = document.getElementById(s);
  c.checked = true;
}
function setList(radio) {
  alert(radio); 
}

<form name=jon>
    <select id="selColors" name="resistors">
      <option value="rbBlack">Black</option>
      <option value="rbBlue">Blue</option>
      <option value="rbBrown">Brown</option>
      <option value="rbGrey">Grey</option>
      <option value="rbGreen">Green</option>
      <option value="rbOrange">Orange</option>
      <option value="rbRed">Red</option>
      <option value="rbViolet">Violet</option>
      <option value="rbYellow">Yellow</option>
      <option value="rbWhite">White</option>
    </select>
    <input onclick="setRb()" type="button" value="Submit">


<div>
    <table>
    <tr>
    <td><input onclick="setList(this.value)" id="rbBlack" value="Black" type="radio" name="colors" />Black</td>
    <td><input onclick="setList(this.value)" id="rbBlue" value="Blue" type="radio" name="colors" />Blue</td>
    <td><input onclick="setList(this.value)" id="rbBrown" value="Brown" type="radio" name="colors" />Brown</td>
    <td><input onclick="setList(this.value)" id="rbGrey" value="Grey" type="radio" name="colors" />Grey</td>
    <td><input onclick="setList(this.value)" id="rbGreen" value="Green" type="radio" name="colors" />Green</td>
    <td><input onclick="setList(this.value)" id="rbOrange" value="Orange" type="radio" name="colors" />Orange</td>
    <td><input onclick="setList(this.value)" id="rbRed" value="Red" type="radio" name="colors" />Red</td>
    <td><input onclick="setList(this.value)" id="rbViolet" value="Violet" type="radio" name="colors" />Violet</td>
    <td><input onclick="setList(this.value)" id="rbYellow" value="Yellow" type="radio" name="colors" />Yellow</td>
    <td><input onclick="setList(this.value)" id="rbWhite"value="White" type="radio" name="colors" />White</td>
    </tr>
    </table>
</div>

Answer 1

Для подключения кнопок выбора к радио - и и наоборот , вы можете сделать следующее:

const EL = sel => document.querySelectorAll(sel);
const connect = ev => {
  [...EL(`[value="${ev.target.value}"]`)].forEach(el => 
    el.type === "radio" ? el.checked = true : el.selected = true
  )
};

// Connect select to radio buttons and vice-versa
[...EL('[name=resistors], [name=colors]')].forEach(el => el.addEventListener('change', connect));

<select name="resistors">
  <option value="Black">Black</option>
  <option value="Blue">Blue</option>
  <option value="Brown">Brown</option>
  <option value="Grey">Grey</option>
  <option value="Green">Green</option>
  <option value="Orange">Orange</option>
  <option value="Red">Red</option>
  <option value="Violet">Violet</option>
  <option value="Yellow">Yellow</option>
  <option value="White">White</option>
</select>

<br>

<label><input type="radio" name="colors" value="Black">Black</label>
<label><input type="radio" name="colors" value="Blue">Blue</label>
<label><input type="radio" name="colors" value="Brown">Brown</label>
<label><input type="radio" name="colors" value="Grey">Grey</label>
<label><input type="radio" name="colors" value="Green">Green</label>
<label><input type="radio" name="colors" value="Orange">Orange</label>
<label><input type="radio" name="colors" value="Red">Red</label>
<label><input type="radio" name="colors" value="Violet">Violet</label>
<label><input type="radio" name="colors" value="Yellow">Yellow</label>
<label><input type="radio" name="colors" value="White">White</label>

Выше используется синтаксис ES6, Sun , любезно предоставьте версию ES5, которую вы можете найти в этой ссылке jsFiddle

Answer 2

Да, это возможно.

Опция доступа с выбранным значением опции:

document.querySelector("option[value='x']")

function setRb() {
  //Point to options list
  //var e = document.getElementById('selColors');
  var e = document.jon.resistors;
  //Get value of color selected
  var s = e.options[e.selectedIndex].value;
  //Now get radio button obect and check it
  var c = document.getElementById(s);
  c.checked = true;
}

// Set current option null
var currOpt = null;

function setList(e) {
  // Value is the id of the clicked radio button
  var val = e.id;
  // Access current option
  currOpt = document.querySelector("option[value=" + val + "]");
  // Set current option "selected" 
  currOpt.setAttribute("selected", "");
}

<form name=jon>
  <select id="selColors" name="resistors">
    <option value="rbBlack">Black</option>
    <option value="rbBlue">Blue</option>
    <option value="rbBrown">Brown</option>
    <option value="rbGrey">Grey</option>
    <option value="rbGreen">Green</option>
    <option value="rbOrange">Orange</option>
    <option value="rbRed">Red</option>
    <option value="rbViolet">Violet</option>
    <option value="rbYellow">Yellow</option>
    <option value="rbWhite">White</option>
  </select>
  <input onclick="setRb()" type="button" value="Submit">
</form>

<div>
  <table>
    <tr>
      <td>
        <input onclick="setList(this)" id="rbBlack" value="Black" type="radio" name="colors" />Black</td>
      <td>
        <input onclick="setList(this)" id="rbBlue" value="Blue" type="radio" name="colors" />Blue</td>
      <td>
        <input onclick="setList(this)" id="rbBrown" value="Brown" type="radio" name="colors" />Brown</td>
      <td>
        <input onclick="setList(this)" id="rbGrey" value="Grey" type="radio" name="colors" />Grey</td>
      <td>
        <input onclick="setList(this)" id="rbGreen" value="Green" type="radio" name="colors" />Green</td>
      <td>
        <input onclick="setList(this)" id="rbOrange" value="Orange" type="radio" name="colors" />Orange</td>
      <td>
        <input onclick="setList(this)" id="rbRed" value="Red" type="radio" name="colors" />Red</td>
      <td>
        <input onclick="setList(this)" id="rbViolet" value="Violet" type="radio" name="colors" />Violet</td>
      <td>
        <input onclick="setList(this)" id="rbYellow" value="Yellow" type="radio" name="colors" />Yellow</td>
      <td>
        <input onclick="setList(this)" id="rbWhite" value="White" type="radio" name="colors" />White</td>
    </tr>
  </table>
</div>