Fatal编程技术网

Javascript 选择和图像

javascript jquery html ajax

Javascript 选择和图像,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我有以下选择： <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&

我有以下选择：

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

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

这是在prototype.js中选择id为“mapframe”的元素的方式：

$('mapframe')
以下是在jquery中执行此操作的方式：

$'mapframe'

ChangeOnChange=$'mapframe.src=$'mapvalue.value； 到
onChange=$'mapframe'.src=$'mapvalue'.val

我为您准备了这个演示：

我使用了这个jQuery：

$("#mapvalue").change(function() {
    $("#mapimg").attr("src",$(this).val());
});
我移除了iframe，然后放了这个：

<img src="" id="mapimg">
为什么要使用iframe而不是img标记？如果我使用img，一切都可以？？jQuery选择器$'mapframe'应该是$'mapframe'，而$'mapvalue'应该是$'mapvalue'。看看Tim Wasson的回答，他给出的代码就是选择具有给定ID的元素所需的全部代码。