Linking radio buttons to dropdown menu

Question

I was hoping to complete this little project without using any if/else/while/for/ whatever control flow statements and in just plain javascript but I seem to run into problems. I am just looking to connect the radio buttons to the drop down menu so that when one is clicked, the other is highlighted. For instance, right now I hae it so that when you select an item from the drop down menu using the setRB() function, it sets true the corresponding radio button.

I'd now like to get the radio button to set true to the corresponding dropdown menu item. Can this be done with the conditions above or do I need to use control flow statements (I believe that's what they're all called).

Thanks.

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

Yes, it is possible.

Access option with the selected option value:

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> 

Answer 2

To connect your Select to Radio buttons - and vice versa , you could do like:

 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> 

The above uses ES6 syntax, Sun kindly provided a ES5 version you can find in this jsFiddle link