JSFiddle - React, Tailwind, and code Playground

by fenderistic

HTML

<div id="links">
   <span>Quick Links</span>
   <a href="#">Home Page</a>
   <a href="#">Online Catalog</a>
   <a href="#">Friends of MPL</a>
   <a href="#">New Books and Other Good Reading</a>
   <a href="#">Illinois Virtual Library</a>
   <a href="#">Internet Public Library</a>
   <a href="#">Services and Collection</a>
   <a href="#">Adult Programs</a>
   <a href="#">Teen Central</a>
   <a href="#">Children's Room</a>
</div>

<div id="main">
<h2>Government Sites on the Web</h2>

<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="http://www.whitehouse.gov">The White House</option>
           <option value="http://www.usda.gov">Department of Agriculture</option>
           <option value="http://www.doc.gov">Department of Commerce</option>
           <option value="http://www.defenselink.mil">Department of Defense</option>
           <option value="http://www.ed.gov">Department of Education</option>
           <option value="http://www.energy.gov">Department of Energy</option>
           <option value="http://www.os.dhhs.gov">Department of Health and Human Services</option>
           <option value="http://www.whitehouse.gov/homeland">Department of Homeland Security</option>
           <option value="http://www.hud.gov">Department of Housing and Urban Development</option>
           <option value="http://www.doi.gov">Department of the Interior</option>
           <option value="http://www.usdoj.gov">Department of Justice</option>
           <option value="http://www.dol.gov">Department of Labor</option>
           <option value="http://www.state.gov">Department of State</option>
           <option value="http://www.ustreas.gov">Department of the Treasury</option>
           </select>
       </td>
   </tr>
   <tr><td>Legislative Branch</td>
       <td><select...

JavaScript

init();

    function init() {
        var allSelect = document.getElementsByTagName("select");

        for (var i = 0; i < allSelect.length; i++) {
            
           // allSelect.push(allSelect[i]) 
            allSelect[i].setAttribute("onChange","loadLink(this)");
        }
            
        }
    

   loadLink = function(e) {
        
        var sIndex = e.selectedIndex;
        location.href = e.options[sIndex].value;
    }