JSFiddle - React, Tailwind, and code Playground

by Dale Howard

HTML

<script src="C:\Users\dhoward\Downloads\imgMaps\MapFillmore.gif"></script>
<script src="C:\Users\dhoward\Downloads\imgMaps\FillmoreMap1314.gif"></script>
<div>
    <input type="text" id=searchField></input>
    <button id=button>SEARCH</button>
</div>
<td width="35%" valign="top">
    <select name="GUDF_CHAR1" class="formStyle" style="width: 85%;" data-field="GUDF_CHAR1">
        <option value="0">-- Select MFH Location --</option>
        <option value="Aldersgate">Aldersgate</option>
        <option value="Camp Aldersgate Day Tx">Camp Aldersgate Day Tx</option>
        <option value="Dacus RTC">Dacus RTC</option>
        <option value="Fillmore">Fillmore</option>
        <option value="GH - ES - Little Rock">GH - ES - Little Rock</option>
        <option value="GH - Fayetteville">GH - Fayetteville</option>
        <option value="GH - Heber Springs">GH - Heber Springs</option>
        <option value="GH - Helena">GH - Helena</option>
        <option value="GH - John Magale">GH - John Magale</option>
        <option value="GH - Magale Manor">GH - Magale Manor</option>
        <option value="GH - Mulberry Girls">GH - Mulberry Girls</option>
        <option value="GH - Searcy">GH - Searcy</option>
        <option value="Jonesboro - Stone Street">Jonesboro - Stone Street</option>
        <option value="MCC - Alma">MCC - Alma</option>
        <option value="MCC - Batesville">MCC - Batesville</option>
        <option value="MCC - Cherokee Village">MCC - Cherokee Village</option>
        <option value="MCC - Fayetteville">MCC - Fayetteville</option>
        <option value="MCC - Heber Springs">MCC - Heber Springs</option>
        <option value="MCC - Hot Springs">MCC - Hot Springs</option>
        <option value="MCC - Jonesboro">MCC - Jonesboro</option>
        <option value="MCC - Little Rock">MCC - Little Rock</option>
        <option value="MCC - Magnolia">MCC - Magnolia</option>
        <option value="MCC - Morrilton">MCC - Morrilton</option>
        <option...

CSS

body {
    margin: 0px;
    padding: 0px;
    font: normal 11px Verdana, Arial, Helvetica, sans-serif;
}
html, body {
    height: 100%;
}
body {
    font: normal normal normal 12px"Lucida Grande", Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    width: 100%;
    background: #ffffff;
    position: relative;
}
* {
    outline: 0px;
}
div.hidden {
    display: none
}

JavaScript

var fillmoreMapEl = document.getElementById('Fillmore');
var aldersgateMapEl = document.getElementById('Aldersgate');
var maumelleMapEl = document.getElementById('Maumelle');
var locationEl = document.getElementsByName("GUDF_CHAR1")[0];
locationEl.addEventListener('change', toggleMap, false);


http://i.imgur.com/VJfK2Mb.gif



function toggleMap() {

    if (locationEl.value == 'Fillmore') {
        //alert("filly ran");
        aldersgateMapEl.className = 'hidden';
        maumelleMapEl.className = 'hidden';
        fillmoreMapEl.className = '';
    } else if (locationEl.value == 'Aldersgate') {
        //alert("alders ran");
        aldersgateMapEl.className = '';
        maumelleMapEl.className = 'hidden';
        fillmoreMapEl.className = 'hidden';
    } else if (locationEl.value == "Maumelle") {
        //alert("mauymelle ran");
        aldersgateMapEl.className = 'hidden';
        maumelleMapEl.className = '';
        fillmoreMapEl.className = 'hidden';
    } else {
        aldersgateMapEl.className = 'hidden';
        maumelleMapEl.className = 'hidden';
        fillmoreMapEl.className = 'hidden';
    }
}