Jquery - изображение не меняется при выборе выпадающего

0

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

 <h2 class="model">A6
<img src="images/3.jpg" id="image" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

<select id="image" class="modelSelect">
    <option value="1" selected>A4</option>
    <option value="2">A6</option>
    <option value="3">A8</option>
</select>

var pictureList = [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg",
     ];

$('#image').change(function () {
    var val = parseInt($('#image').val());
    $('img').attr("src",pictureList[val]);
});

Изображение 174551

  • 0
    где твой выпадающий список?
  • 0
    Ваше меню выбора имеет тот же идентификатор, что и ваш img?
Показать ещё 3 комментария
Теги:

8 ответов

2

2 проблемы:

  1. Вы используете один и тот же идентификатор для <img/> и <select/>
  2. Массив начинается с индекса 0, а не с 1. Таким образом, ваш HTML для <select/> должен выглядеть так:

    <select id="image" class="modelSelect"> <option value="0" selected>A4</option> <option value="1">A6</option> <option value="2">A8</option> </select>

  • 0
    Я собираюсь написать то же самое, что вы упоминаете. После публикации я уже видел, как вы рассказали эти вещи. :)
1

Ваш идентификатор тот же

сделайте вот так:

<select id="imageSelect" class="modelSelect">
    <option value="1" selected>A4</option>
    <option value="2">A6</option>
    <option value="3">A8</option>
</select>

$('#imageSelect').change(function () {
    var val = parseInt($('#imageSelect').val());
    $('img').attr("src", pictureList[val]);
});
0

Скрипт: http://jsfiddle.net/97uue/1/

HTML: (Изменить идентификатор изображения, выберите значение параметра, потому что индекс массива начинается с 0.)

<h2 class="model">A6
<img src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

<select id="image" class="modelSelect">
    <option value="0" selected>A4</option>
    <option value="1">A6</option>
    <option value="2">A8</option>
</select>

Код JS:

var pictureList = [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg",
     ];

$('#image').change(function () {
    var ImgName = $('#image').val();    
    $('img').attr("src",pictureList[ImgName]);
});
0

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

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

$('#image-dropdown').change(function () {
    var val = parseInt($('#image-dropdown').val());
    $('img').attr("src",pictureList[val - 1]);
});

Обратите внимание, что я также изменил индекс для списка изображений, начиная с 0, а не с 1.

И измените идентификатор для тега select в html:

<select id="image-dropdown" class="modelSelect">
    <option value="1" selected>A4</option>
    <option value="2">A6</option>
    <option value="3">A8</option>
</select>
0

сделайте так, как у вас есть одинаковый идентификатор для обоих, вам нужно больше описательного селектора или изменить идентификаторы, чтобы оба они не были одинаковыми:

$('select#image').change(function () {
    var val = parseInt($('select#image').val());
    $('img#image').attr("src",pictureList[val]);
});
0
<h2 class="model">A6
<img src="images/3.jpg" id="image" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

<select id="ddlImage" class="modelSelect">
    <option value="1" selected>A4</option>
    <option value="2">A6</option>
    <option value="3">A8</option>
</select>

var pictureList = [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg",
     ];

$(#ddlImage).change(function () {
    var val = parseInt($('#ddlImage).val());
    $(#img).attr("src",pictureList[val]);
});
0

замените эту строку

// added your image id within its parent
$('img #image').attr("src", pictureList[val]);
0

Идентификатор изображения $('#image') - это balise img, а не выпадающее меню, поэтому измените один идентификатор, чтобы он соответствовал хорошему, и не забывайте, что массив начинается с 0, а не 1;)

 <h2 class="model">A6
<img src="images/3.jpg" id="image" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

<select id="selectimage" class="modelSelect">
    <option value="0" selected>A4</option>
    <option value="1">A6</option>
    <option value="2">A8</option>
</select>

var pictureList = [
    "images/1.jpg",
    "images/2.jpg",
    "images/3.jpg",
     ];

$('#image').change(function () {
    var val = parseInt($('#selectimage').val());
    $('img').attr("src",pictureList[val]);
});
Сообщество Overcoder
Наверх
Меню