0

我有这个选择：

<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>

我希望当您选择一个选项时，无需刷新页面即可为您加载图像。我怎样才能做到这一点？我需要什么库？？

在此之前我使用的是prototypejs。如果您添加它的库，它将起作用。但是我需要使用其他库，因为我对prototypejs 有问题。

4

3 回答 3

1

Jquery is different from prototype.js in some ways. One of them is how you select an element with ID.

While this is how you select the element with 'mapframe' id in prototype.js:

$('mapframe')

this is how you do it in jquery:

$('#mapframe')

于 2013-07-05T18:58:43.817 回答
0

change onChange="$('mapframe').src = $('mapvalue').value;" to onChange="$('#mapframe').src = $('#mapvalue').val();"

于 2013-07-05T19:01:01.093 回答
0

我得到了这个演示为你工作：http: //jsfiddle.net/b2yqt/

我使用了这个 jQuery：

$("#mapvalue").change(function() {
    $("#mapimg").attr("src",$(this).val());
});

我删除了 iframe 并放了这个：

<img src="" id="mapimg">
于 2013-07-05T19:02:24.367 回答