Смена картинки в зависимости от выбора select option

Пример на jQuery:

<select id="selm" name="m">
	<option data-path="/images/znaki_oven.png" value="ov">Овен</option>
	<option data-path="/images/znaki_telec.png" value="te">Телец</option>
	<option data-path="/images/znaki_blizneci.png" value="bl">Близнецы</option>
	<option data-path="/images/znaki_rak.png" value="ra">Рак</option>
	<option data-path="/images/znaki_lev.png" value="le">Лев</option>
	<option data-path="/images/znaki_deva.png" value="de">Дева</option>
	<option data-path="/images/znaki_vesi.png" value="ve">Весы</option>
	<option data-path="/images/znaki_scorpion.png" value="sk">Скорпион</option>
	<option data-path="/images/znaki_strelec.png" value="st">Стрелец</option>
	<option data-path="/images/znaki_kozerog.png" value="ko">Козерог</option>
	<option data-path="/images/znaki_vodoley.png" value="vo">Водолей</option>
	<option data-path="/images/znaki_ribi.png" value="ri">Рыбы</option>
</select>

<div id="selmimg"><img src="/images/znaki_oven.png" /></div>

Сам скрипт:

$(document).ready(function(){
	$('#selm').change(function(){
		$('#selmimg').find('img:first').attr('src', $('#selm option:selected').attr('data-path'));
	});
});

В зависимости от выбранного option будет меняться картинка в диве #selmimg

Запись опубликована в рубрике JavaScript с метками . Добавьте в закладки постоянную ссылку.

4 комментария: Смена картинки в зависимости от выбора select option

  1. Дмитрий говорит:

    Не работает ваш пример — изображения не отображаются.

  2. Жека говорит:

    Спасибо, выручили!!! оказывается всего пару строк, а сам недопираю)

  3. Жека говорит:

    одно только но, я использовал скрипт для онлайн калькулятора, после того как я выбираю пункт из выпадающего списка нажимаю расчет и калькулятор соответственно обновляется для расчета. Выбранные пункт из списка не сбивается, остается выбранным, но картинка сбивается на default, будто бы выбран первый пункт

  4. rurk говорит:

    пример бы выложить, вообще б круть была, спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *