JSFiddle - React, Tailwind, and code Playground

by Zeljko Tadic

HTML

<article>
  <form id="govLinks" name="govLinks">
    <h1>Government Sites on the Web</h1>
    <p>Select a site from one of the drop-down lists below.</p>
    <table>
      <tr>
        <td>Executive Branch</td>
        <td>
          <select name="executive" id="executive" class="optionLinks">
            <option value="#">Select a Web site</option>
            <option value="https://www.whitehouse.gov">The House</option>
            <option value="https://www.usda.gov">Dept of Agriculture</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Legislative Branch</td>
        <td>
          <select name="legislative" id="legislative" class="optionLinks">
            <option value="#">Select a Web site</option>
            <option value="https://www.house.gov">House Web Site</option>
            <option value="https://www.senate.gov">Senate Web Site</option>
          </select>
        </td>
      </tr>
    </table>
  </form>
  </article

JavaScript

var allSelect = document.govLinks.querySelectorAll('select');

for (var i = 0; i < allSelect.length; i++) {
  allSelect[i].onchange = function() {
    var selectedOption = this.querySelector('option[seleect]');
    window.location.href = this.value;
  }
}