Выберите и изображение

Я это выбор:Выберите и изображение

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

источник

2013-07-05 user2540352

Почему вы используете 'iframe' и не' img' тегов? –

Если я использую img, все будут работать? – user2540352

Ваш селектор jQuery '$ ('mapframe')' должен быть '$ ('# mapframe')' и '$ ('mapvalue')' должен быть '$ ('# mapvalue')'. Посмотрите на Тима Вассона, ответьте ниже. –

JQuery отличается от прототипа.js в некотором роде. Одним из них является выбор элемента с идентификатором.

Хотя это, как вы выберите элемент с 'mapframe' ид в prototype.js:

$('mapframe')

это, как вы делаете это в JQuery:

$('#mapframe')

источник

2013-07-05 18:58:43 keune

Как ?? Можете ли вы поместить весь код? – user2540352

Код, который он дал, - это весь код, необходимый для выбора элемента с заданным ID. –

изменения onChange="$('mapframe').src = $('mapvalue').value;" до onChange="$('#mapframe').src = $('#mapvalue').val();"

источник

2013-07-05 19:01:01 Dementic

Я получил эту демонстрационную работу для вас: http://jsfiddle.net/b2yqt/

Я использовал этот JQuery:

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

и я удалил IFRAME и просто поставить это:

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

источник

2013-07-05 19:02:24

Выберите и изображение

ответ

Смежные вопросы