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

Question

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]);
});

Marilee 13 май 2014, в 10:13

Источник

0

где твой выпадающий список?
Ashok Damani 13 май 2014, в 07:27
0

Ваше меню выбора имеет тот же идентификатор, что и ваш img?
Maurice Perry 13 май 2014, в 07:28
0

вам нужно применить событие изменения в выпадающем списке, а не на изображении
Sai Avinash 13 май 2014, в 07:28
0

@AshokDamani Я только что добавил это ... извините
Marilee 13 май 2014, в 07:30
0

@Marilee..iMarilee..я думаю, было бы гораздо проще написать скрипт для уникальных идентификаторов, чем иметь одинаковые для нескольких элементов управления на одной странице
Sai Avinash 13 май 2014, в 07:31

Показать ещё 3 комментария

Теги:

javascript

jquery

8 ответов

Ещё вопросы

Ваше меню выбора имеет тот же идентификатор, что и ваш img?
вам нужно применить событие изменения в выпадающем списке, а не на изображении
@AshokDamani Я только что добавил это ... извините
@Marilee..iMarilee..я думаю, было бы гораздо проще написать скрипт для уникальных идентификаторов, чем иметь одинаковые для нескольких элементов управления на одной странице

Horen · Answer 1 · 2014-05-13T06-27-00.000Z

2 проблемы:

Вы используете один и тот же идентификатор для <img/> и <select/>
Массив начинается с индекса 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>

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

TheAX · Answer 2 · 2014-05-13T05-59-00.000Z

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

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

<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]);
});

Arul · Answer 3 · 2014-05-13T07-02-00.000Z

Скрипт: 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]);
});

Matt Zeunert · Answer 4 · 2014-05-13T06-24-00.000Z

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

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

$('#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>

Ehsan Sajjad · Answer 5 · 2014-05-13T05-20-00.000Z

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

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

Sai Avinash · Answer 6 · 2014-05-13T04-52-00.000Z

<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]);
});

SagarPPanchal · Answer 7 · 2014-05-13T04-44-00.000Z

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

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

ekans · Answer 8 · 2014-05-13T04-33-00.000Z

Идентификатор изображения $('#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]);
});