Question

我有这个选择：

<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的问题。

Answer 1

Jquery在某些方面与prototype.js不同。其中之一就是如何选择带有ID的元素。

虽然这是你在prototype.js中选择'mapframe'id的元素：

$('mapframe')

这是你在jquery中的表现：

$('#mapframe')

Answer 2

更改onChange="$('mapframe').src = $('mapvalue').value;" 至 onChange="$('#mapframe').src = $('#mapvalue').val();"

Answer 3

我让这个演示适合你：http://jsfiddle.net/b2yqt/

我使用了这个jQuery：

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

我删除了iframe，然后将其放入：

<img src="" id="mapimg">

选择并成像

3 个答案: