CODEWITHSUNDEEP
javascriptjquery
Marilee
Marilee

Reputation: 1598

Jquery - Image not changing onselect of dropdown

I have a select menu with different car models, when user selects a model from the dropdown the car image needs to change, but it is not changing. Here is my code:

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

enter image description here

Upvotes: 0

Views: 184

Answers (8)

Arul
Arul

Reputation: 491

Fiddle : http://jsfiddle.net/97uue/1/

HTML: ( Change Image ID, Select option value, because array index start from 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 Code:

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

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

Upvotes: 0

TheAX
TheAX

Reputation: 11

Your id is the same

do like this:

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

Upvotes: 1

SagarPPanchal
SagarPPanchal

Reputation: 10131

replace this line 

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

Upvotes: 0

Matt Zeunert
Matt Zeunert

Reputation: 16571

You are listening to the change event on the image. Both the image and the dropdown have the same id, they need to be unique.

Use a different id for the dropdown and it will attach the event handler to the correct element.

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

Note that I also changed the index for the picture list to start from 0 rather than 1.

And change the id for the select tag in the html:

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

Upvotes: -1

Sai Avinash
Sai Avinash

Reputation: 4753

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

Upvotes: 0

ekans
ekans

Reputation: 1724

The id image $('#image') is the balise img and not the dropdown so modify one id to match the good one and don't forget that an array begin to 0 and not 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]);
});

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

do like this as you have same id for both, you need more descriptive selector or change the ids so that both should not be same:

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

Upvotes: 0

Horen
Horen

Reputation: 11382

2 problems:

  1. You use the same id for the <img /> and the <select />

  2. An array starts with index 0 not with 1. So your HTML for the <select /> should look like this:

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

Upvotes: 2

Related Questions