Смена атрибута при выборе из выпадающего списка

Тема в разделе "JavaScript", создана пользователем spro1, 12 окт 2015.

Модераторы: ZiX
  1. spro1

    spro1

    Регистр.:
    26 май 2013
    Сообщения:
    170
    Симпатии:
    70
    Здравствуйте!

    есть:
    выпадающий список
    HTML:
    <select id="spisok" class="spisok" data-tooltip="" data-load-state="" style="" title="" size="" name="spisok">
    <option selected="selected" value="Значение 1" >Значение 1</option>
    <option value="Значение 2">Значение 2</option>
    </select>
    и див с картинкой
    <div id=img><img src=/image.jpg></div>
    задача при выборе значения из списка сменить путь к картинке

    сделал так:

    Код:
    <script>
    var spisok = $("#spisok").val()
    function changimg(){
    if(spisok == "Значение 2")
          {
            $("#img img").attr("src", "/image2.jpg");     
          }
    }
    </script>
    
    я плохо знаю jquery и видимо в чем то ошибся, но не могу понять почему не работает. Подскажите, что не так делаю?
     
    Последнее редактирование: 12 окт 2015
  2. ZiX

    ZiX Коддинг, Парсинг

    Moderator
    Регистр.:
    9 июл 2011
    Сообщения:
    1.390
    Симпатии:
    580
    HTML:
    <script>
    function changimg(){
    var spisok = $("#spisok").val()
    if(spisok == "Значение 2")
          {
            $("#img img").attr("src", "/image2.jpg");     
          }
    }
    </script>
    вот так верно.
     
  3. spro1

    spro1

    Регистр.:
    26 май 2013
    Сообщения:
    170
    Симпатии:
    70
    очень странно, но не работает
     
  4. ZiX

    ZiX Коддинг, Парсинг

    Moderator
    Регистр.:
    9 июл 2011
    Сообщения:
    1.390
    Симпатии:
    580
    ты функцию то как вызываешь?
    Вот рабочий вариант. вам не только js но html подучить бы...
    Перейти по ссылке
     
    Последнее редактирование: 12 окт 2015
  5. spro1

    spro1

    Регистр.:
    26 май 2013
    Сообщения:
    170
    Симпатии:
    70
    HTML:
    <script>
    $('#spisok > option').bind('click', function(){
    function changimg(){
    var spisok = $("#spisok").val()
    if(spisok == "Значение 2")
          {
            $("#img img").attr("src", "/image2.jpg");    
          }
    }
    });
    </script>
     
  6. ZiX

    ZiX Коддинг, Парсинг

    Moderator
    Регистр.:
    9 июл 2011
    Сообщения:
    1.390
    Симпатии:
    580
    смотрите Вот рабочий вариант. вам не только js но html подучить бы...
    Перейти по ссылке
     
    spro1 нравится это.
  7. spro1

    spro1

    Регистр.:
    26 май 2013
    Сообщения:
    170
    Симпатии:
    70
    по поводу html в первом сообщении немного неверно написал, согл(ошибся просто)... Не знаю что за дела, но у меня на сайте этот код не срабатывает. Я вижу, что по ссылке все работает и написано все верно, возможно в версии библиотеки проблема?

    html генерирует компонент сайта, но разметка там такая же, попробовал просто скопировать, то что вы написали - не работает.
     
  8. ZiX

    ZiX Коддинг, Парсинг

    Moderator
    Регистр.:
    9 июл 2011
    Сообщения:
    1.390
    Симпатии:
    580
    оберни в
    $(document).ready(function(){
    $('#spisok').on('change', function(){
    var spisok = $(this).val()
    if(spisok == "Значение 2")
    {
    $("#img img").attr("src", "/image2.jpg");
    }
    });
    });

    попробуй так.
     
    spro1 нравится это.
  9. denverkurt

    denverkurt Denve®

    Регистр.:
    23 дек 2013
    Сообщения:
    685
    Симпатии:
    376
    если сначала идет JS код а потом HTML, то нужно делать как посоветовал ZIX, поскольку яваскрипт еще незнает ничего об $('#spisok')

    а вообще открывайте firebug, консоль разработчика и читайте ошибки. чаще всего там доступным языком пишут что и где не работает, почему
     
    ZiX нравится это.
  10. andystill

    andystill Постоялец

    Регистр.:
    23 апр 2012
    Сообщения:
    57
    Симпатии:
    6
    Я в идеале использую $ как параметр jQuery, для нивелирования вероятности конфликта с прочими скриптами на сайте к нулю:
    jQuery(document).ready(function($){
    $('#spisok').on('change', function(){
    var spisok = $(this).val()
    if(spisok == "Значение 2")
    {
    $("#img img").attr("src", "/image2.jpg");
    }
    });
    });
     
    denverkurt нравится это.