Использование выбора для переключения изображений

Question

Я довольно новичок в jQuery и пытаюсь переключить атрибут изображения src, получая ссылки из тега select HTML.

Это выбранный HTML, который я использую:

<select id="pages">
  <option value="Manga/Naruto/Friends/01.png">1</option>
  <option value="Manga/Naruto/Friends/02.png">2</option>
  <option value="Manga/Naruto/Friends/03.png">3</option>
  <option value="Manga/Naruto/Friends/04.png">4</option>
</select>

Это скрипт jQuery, который я пытаюсь использовать для переключения атрибута изображения src:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $("#pages").change(function(){
    $('#greatphoto').attr('src', val());
    //.val());
  }); 
</script>

И это заполнитель для изображений, которые я пытаюсь переключить:

<div id="mangaImages">
  <img id="greatphoto" src="Manga/Naruto/Friends/01.png" />
</div> <!-- end of mangaImages -->

Любая помощь с этим будет принята с благодарностью.

Answer 1

Вы можете попробовать

$(this).val()

вместо

val()

Answer 2

Сделайте это:

$(function() {
   $("#pages").change(function(){
      $('#greatphoto').attr('src', this.value); // Could use $(this).val() too.
   });
});

Оборачивая ваш код с помощью $(function() {...});, убедитесь, что DOM загружен перед запуском. Это ярлык для вызова метода jQuery .ready().

Прямо сейчас ваш <select> не получает событие change, потому что оно еще не существует, когда код выполняется.