Select que produzca imagen

[carlosuc99]

Buenas,

Tengo este select:

Código Javascript:

<form action="javascript">
            <table width="100%">
            <tr><td>Choose a map</td>
            <td>
            <select name="map" id="mapvalue" onChange="$('mapframe').src = $('mapvalue').value;">
            <option value=""></option>
            <optgroup label="Satellite views">
                <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-B1_bw.jpg">Atlantic</option>
                <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-H_bw.jpg">North Atlantic</option>
                <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-G_bw.jpg">Europe / Asia</option>
                <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-C_bw.jpg">Europe / Africa</option>
                <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-E_bw.jpg">Indian Ocean</option>
                <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-A_bw.jpg">North / South America</option>
                <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-I_bw.jpg">North Pacific</option>
                <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-F_bw.jpg">South Pacific</option>
                <option value="http://aviationweather.gov/data/obs/sat/intl/ir_ICAO-M_bw.jpg">Trans Atlantic</option>
            </optgroup>
            <optgroup label="TEMSI Maps">
                <option value="http://aviationweather.gov/data/iffdp/2106.gif">Asia / Oceania</option>
                <option value="http://aviationweather.gov/data/iffdp/2132.gif">Atlantic / North Pole</option>
                <option value="http://aviationweather.gov/data/iffdp/2130.gif">Atlantic (Europe/Africa/America)</option>
                <option value="http://aviationweather.gov/data/iffdp/2104.gif">Europe / Africa</option>
                <option value="http://aviationweather.gov/data/iffdp/2107.gif">Europe / Asia</option>
                <option value="http://aviationweather.gov/data/iffdp/2105.gif">Europe / Central Asia</option>
                <option value="http://aviationweather.gov/data/iffdp/2108.gif">Europe / North America</option>
                <option value="http://aviationweather.gov/data/iffdp/2101.gif">North America</option>
                <option value="http://aviationweather.gov/data/iffdp/2133.gif">North Pacific</option>
                <option value="http://aviationweather.gov/data/iffdp/2131.gif">Pacific</option>
                <option value="http://aviationweather.gov/data/iffdp/2109.gif">South Africa / Australia</option>
                <option value="http://aviationweather.gov/data/iffdp/2103.gif">South Atlantic</option>
                <option value="http://aviationweather.gov/data/iffdp/2134.gif">South Pacific</option>
            </optgroup>
            <optgroup label="Color TEMSI Maps">
                                <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_ANALYSIS_METSAT_00_SFC_METSAT-ANALYSIS-7.gif">Europe Current</option>
                <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_24.gif">Europe Forecast 24h</option>
                <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_48.gif">Europe Forecast 48h</option>
                <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_72.gif">Europe Forecast 72h</option>
                <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_96.gif">Europe Forecast 96h</option>
                <option value="http://ows-public.sembach.af.mil/gifImages/21OWS_EUROPE_FITL_PROG-BRIEFING_120.gif">Europe Forecast 120h</option>
                            </optgroup>
            <optgroup label="WINTEM Maps">
                <option value="http://aviationweather.gov/data/iffdp/2315.gif">Americas - FL100</option>
                <option value="http://aviationweather.gov/data/iffdp/2311.gif">Americas - FL340</option>
                <option value="http://aviationweather.gov/data/iffdp/2415.gif">Africa / Americas - FL100</option>
                <option value="http://aviationweather.gov/data/iffdp/2411.gif">Africa / Americas - FL340</option>
                <option value="http://aviationweather.gov/data/iffdp/2737.gif">Asia - FL100</option>
                <option value="http://aviationweather.gov/data/iffdp/2733.gif">Asia - FL340</option>
                <option value="http://aviationweather.gov/data/iffdp/2797.gif">Asia / Oceania - FL100</option>
                <option value="http://aviationweather.gov/data/iffdp/2793.gif">Asia / Oceania - FL340</option>
                <option value="http://aviationweather.gov/data/iffdp/2917.gif">Europe / Africa - FL100</option>
                <option value="http://aviationweather.gov/data/iffdp/2913.gif">Europe / Africa - FL340</option>
                <option value="http://aviationweather.gov/data/iffdp/2857.gif">Europe / Africa / Asia - FL100</option>
                <option value="http://aviationweather.gov/data/iffdp/2853.gif">Europe / Africa / Asia - FL340</option>
                <option value="http://aviationweather.gov/data/iffdp/2517.gif">North America / Europe - FL100</option>
                <option value="http://aviationweather.gov/data/iffdp/2513.gif">North America / Europe - FL340</option>
                <option value="http://aviationweather.gov/data/iffdp/2255.gif">Pacific - FL100</option>
                <option value="http://aviationweather.gov/data/iffdp/2251.gif">Pacific - FL340</option>
                <option value="http://aviationweather.gov/data/iffdp/2200.gif">North Pacific - FL100</option>
                <option value="http://aviationweather.gov/data/iffdp/2196.gif">North Pacific - FL340</option>
            </optgroup>
            <optgroup label="CAT Forecast">
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN24a.GIF">Atlantic - 0h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN6a.GIF">Atlantic - 6h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN12a.GIF">Atlantic - 12h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN18a.GIF">Atlantic - 18h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN24.GIF">Pacific - 0h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN6.GIF">Pacific - 6h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN12.GIF">Pacific - 12h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN18.GIF">Pacific - 18h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN24p.GIF">Northern Hemisphere - 0h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN6p.GIF">Northern Hemisphere - 6h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN12p.GIF">Northern Hemisphere - 12h UTC</option>
                <option value="http://www.orbit.nesdis.noaa.gov/smcd/opdb/aviation/turb/tidaily/TIAVN18p.GIF">Northern Hemisphere - 18h UTC</option>
            </optgroup>
            </select>
            </td></tr>
            </table>
        </form>
 
        <iframe src="" id="mapframe" width="100%" height="650" frameborder="0"></iframe>
 

Lo que quiero que haga es que cuando seleciones una opción se te cargue la imagen correspondiente. Yo esto antes lo hacia con prototypejs. De hecho si le añadís este script a esto os funcionará. Pero debido a una incompatibilidad tengo que cambiar.

Cómo podría hacer para que con otro librería si hiciese lo que quiero??

[caricatos]

Hola:

¿Usas una librería para asignar un valor a un atributo?...

Seguro que si cambias "$" por el método que parece ser su "alias": document.getElementById...

Por cierto, los manipuladores de eventos se escriben en minúsculas (onchange)...

Aunque con un name en el iframe creo que sería mejor...

select onchange="document.frames[el_nombre_del_iframe].href = this.value"...

Saludos